描述：当用户鼠标放在图片上的时候，显示左右的按钮。离开的时候，左右按钮自动隐藏。点击左右按钮，图片依次滚动播放。
注意：代码里面的图片换成自己的哦,图片的大小也记得更改哦。
效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右焦点图</title>
<style>
* {
margin: 0;
padding: 0;
//list-style: none;
}
#box {
width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img {
width: 490px;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="box">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right"> ></span>
</div>
</div>
</body>
</html>
<script>
//获取相关元素
var box = document.getElementById("box");
var imgWidth = box.children[0].offsetWidth;
var ul = box.children[0].children[0];
var boxLeftRight = box.children[1];
var btnArr = boxLeftRight.children;
//控制鼠标经过时候的左右按钮的隐藏与显示
box.onmouseover = function () {
boxLeftRight.style.display = "block";
}
box.onmouseout = function () {
boxLeftRight.style.display = "none";
}
//设置计数器
var index = 0;
//点击更换图片
btnArr[1].onclick = function () {
index++;
if(index>ul.children.length-1){
index = ul.children.length-1;
}
animate(ul,-index*imgWidth);
}
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>