焦点图，思路我感觉，JS在网页中的运用，只要有清晰的思维就可以。第一步需要做什么，第二步不要做什么。在我们做一些消过毒时候，运用了那些JS的知识，需要用到的事件是什么，执行的步骤，是什么。
这个效果的目的是让我们的鼠标放上去的时候背后的图片跟着滑动，按钮的颜色跟着变化。我们首先分析，按钮的颜色变化需要用到排他思想使用排他思想先遍历所有的元素，对于获取的元素执行onmouseover事件，然后在每执行每个元素的时候，遍历 所有的li清除样式，只是保留自己的样式。然后对于所有的元素。
JS中实现效果的流程，一、获取元素，思考一下获取元素的方法，要记得通过父元素、子元素获取想要的元素的方法。二、操作元素。元素就是整个网页中的节点，这些节点的特点是，有的有样式，有的有事件。三、具体分析对于元素样式的操作有哪些方法。有行内样式.style 外部样式 四，事件的操作 这是JS中难点，事件三步骤：获取元素、绑定事件、事件执行的过程。
最难的是过程，过程最重要的是解决问题的思路，顺序。写小说有起承转合的顺序。做程序也一样。
for(var i=0;i<lis.length;i++){
lis[i].index = i; // 每个li 的索引号，索引号有什么作用。lis[i].onmouseover = function() {
for(var j=0;j<lis.length;j++)
{
lis[j].className = "";
}
this.className = "current";
target = -this.index * 490; // 目标位置 就是用当前的索引号乘以 一个盒子的宽度
}
}
<!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;
for(var i=0;i<lis.length;i++){
lis[i].index = i; // 每个li 的索引号
lis[i].onmouseover = function() {
for(var j=0;j<lis.length;j++)
{
lis[j].className = "";
}
this.className = "current";
target = -this.index * 490; // 目标位置 就是用当前的索引号乘以 一个盒子的宽度
}
}
setInterval(function() {
leader = leader + (target - leader ) / 10;
ul.style.left = leader + "px";
},30);
</script>