Focus map, ideas I feel that the use of JS in web pages only requires clear thinking. What to do in the first step and what not to do in the second. When we did some disinfection, we used the knowledge of JS, what are the events that need to be used, what are the steps to be executed, and what are they.
The purpose of this effect is to let the picture behind us slide along when the mouse is placed, and the color of the button changes accordingly. We first analyze that the color change of the button needs to use the exclusive idea to use the exclusive idea to traverse all the elements first, execute the onmouseover event for the acquired element, and then traverse all the li clear styles every time each element is executed, just keep yourself style. Then for all elements.
The process of realizing the effect in JS, first, get the element, think about the method of getting the element, remember the method of getting the desired element through the parent element and the child element. 2. Operational elements. Elements are nodes in the entire web page. These nodes are characterized by some styles and some events. 3. Specific analysis of the methods for the operation of element styles. There are inline styles.style external styles Fourth, the operation of events This is a difficult point in JS, the three steps of events: the process of acquiring elements, binding events, and event execution.
The most difficult thing is the process. The most important thing in the process is the idea and sequence of solving the problem. Writing a novel has an order of succession and transformation. The same goes for doing programs.
for(var i=0;i<lis.length;i++){
lis[i].index = i; // The index number of each li, what does the index number do.lis[i].onmouseover = function() {
for(var j=0;j<lis.length;j++)
{
lis[j].className = "";
}
this.className = "current";
target = -this .index * 490; // The target position is the current index number multiplied by the width of a box
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul,ol{list-style:none;}
img {
display: block; /* 清除图片底册 3像素缝隙*/
}
.slider {
width: 490px;
height: 170px;
border:1px solid #ccc;
margin: 100px auto;
padding:5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
/*overflow: hidden*/
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
margin-left: -80px;
bottom: 10px;
}
.slider ol li{
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}
</style>
</head>
<body>
<div class="slider" id="jd">
<div class="inner">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
</ul>
</div>
<ol id="ol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script>
var jd=document.getElementById("jd");
var ul=jd.children[0].children[0];
var ullis=jd.children[0].children[0];
var target=0,leader=0;
var ol=jd.children[1];
var lis=ol.children;lis[i].onmouseover = function() {lis[i].index = i; // the index number of each li
for(var i=0;i<lis.length;i++){
for(var j=0;j<lis.length;j++)
{
lis[j].className = "";
}
this.className = "current";
target = -this.index * 490; // The target position is used The current index number is multiplied by the width of a box
} } setInterval(function() { leader = leader + (target - leader ) / 10; ul.style.left = leader + "px"; },30); </script >