需求:鼠标放上去显示按钮，鼠标移开隐藏按钮；
点击左边按钮图片向右移动，点击右边按钮图片向左移动
步骤:1.获取数据源和相关元素
2.绑定事件
鼠标放上去显示，鼠标移开隐藏
3.书写驱动程序
点击左侧按钮图片向右移动，利用计数器模拟index值
点击右侧按钮图片向左移动，利用计数器模拟index值
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动焦点图</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.box{
490px;
height: 170px;
padding: 2px;
border:1px solid #ccc;
margin:200px auto;
}
.inner ul{
list-style:none;
500%;
position: absolute;
left: 0px;
}
.inner{
490px;
height: 170px;
overflow: hidden;
position: relative;
}
li{
float: left;
}
.square {
display: none;
}
.square span{
40px;
height: 40px;
background: #000;
color: #fff;
cursor: pointer;
position: absolute;
top: 40%;
font: 900 35px/40px "黑体";
font-weight: bold;
text-align: center;
opacity: 0.3;
}
.square .right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner" id="inner">
<ul id="ul">
<li><img src="../images/01.jpg"></li>
<li><img src="../images/02.jpg"></li>
<li><img src="../images/03.jpg"></li>
<li><img src="../images/04.jpg"></li>
<li><img src="../images/05.jpg"></li>
</ul>
<div class="square" id="square">
<span class="left"><</span>
<span class="right">></span>
</div><!-- square结束 -->
</div><!-- inner结束 -->
</div><!-- box结束 -->
<script type="text/javascript">
//获取数据源和相关元素
var box = document.getElementById("box");
var ul = document.getElementById("ul");
var inner = document.getElementById("inner");
var imgWidth = inner.offsetWidth;
var boxLeftRight = box.children[0].children[1];
var btnArr = boxLeftRight.children;
//第一步，先显示和隐藏左右盒子
box.onmouseover = function(){
boxLeftRight.style.display = "block";
}
box.onmouseout = function(){
boxLeftRight.style.display = "none";
}
//点击右侧按钮向左移动图片,并用计数器模拟index值
var index = 0;
btnArr[1].onclick = function(){
index++;
//要限制index值最大不能超过ul.children.length-1，最小不能小于0
if (index>ul.children.length-1) {
index = ul.children.length-1;
}
animate(ul,-index*imgWidth);
}
//点击左侧按钮向右移动图片,并用计数器模拟index值
btnArr[0].onclick = function(){
index--;
if (index<0) {index=0;}
animate(ul,-index*imgWidth);
}
//动画效果函数(元素，目标值)
function animate(ele,target){
//用定时器先清定时器
clearInterval(ele.timer);
//移动的步长
var speed = target>ele.offsetLeft?10:-10;
//设置定时器
ele.timer=setInterval(function(){
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft+speed+"px";
//如果要停止盒子，就要清除定时器
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target+"px";
clearInterval(ele.timer);
}
},10);
}
</script>
</body>
</html>