前面总结了很多了有关于图片操作的案例，本次是基于前面的基础，做一个综合的图片轮播效果，需要实现以下功能：
- 没有任何操作时，图片自动轮播
- 鼠标悬浮时，图片停止轮播；当鼠标移开，轮播继续
- 鼠标悬浮时，出现左右切换按钮，可点击按钮进行左右切换
- 点击地下的小按钮进行切换
为了实现上面的效果，我们需要有个大盒子来固定位置和大小，然后就需要一个放置图片的div，里面放图片列表，焦点列表，左右按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0
}
.box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px; }
.inner{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.inner img{
width: 500px;
height: 300px;
vertical-align: top
}
ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left; } ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
ol li{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer; }
ol .current{
background-color: red;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--轮播图-->
<ul>
<li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>
</ul>
<ol class="bar">
</ol>
<!--左右焦点-->
<div id="arr">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div> </div>
</div>
</body>
</html>
此时，基本结构完成，因为超出隐藏，所以只显示了第一张图片
接下来就是写相关的事件方法了。
首先，我们需要获取会用到相关元素
var box=document.getElementById("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=document.getElementById("arr");
var imgWidth=inner.offsetWidth;
var right=document.getElementById("right");
var pic=0;
其次，在上面我们可以看到，操作需要用到的小按钮并没有，这时因为在实际运用中，图片的数量是不可控的，所以小按钮的数量也是不可控的，我们可以采用js根据图片的数量来动态生成。当鼠标移入某个按钮时，该按钮高亮，并且轮播图切换到与该按钮索引相同的图片，所以我们需要为按钮添加鼠标事件。
然后就是外层盒子的鼠标事件，没有任何操作时，图片自动轮播；鼠标移入，左右切换按钮出现，图片轮播停止；鼠标移除，左右切换按钮隐藏，图片继续轮播。
最后就是个左右按钮添加点击切换事件，具体代码如下：
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
liObj.onmouseover=function () {
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
olObj.children[0].className = "current";ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,3000);
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,3000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
if (pic == list.length - 1) {
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";
}
pic++;
animate(ulObj, -pic * imgWidth);if (pic == list.length - 1) {
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
} else {
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
};
function animate(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var step = 10;
step = current < target ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 10);
}
完整详细代码下载：点这里
最后分享一个图片轮播插件的链接：https://www.html5tricks.com/15-jquery-html5-image-player.html