最近学习了一下通过js来控制焦点图片轮播，学习的目的是领悟代码实现过程和实现思路，以下附上代码，可以学习学习领悟一下：
HTML文件mytest.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试焦点轮播图片</title>
<link rel="stylesheet" href="css/mytest.css" />
<script type="text/javascript" src="js/mytest.js" ></script>
</head>
<body>
<div class="mydiv" id="mydiv">
<div class="mydiv01">
<ul>
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
</div>
<ol>
</ol>
</div>
</body>
</html>样式文件mytest.css:
*{padding: 0;margin: 0;list-style: none;border: 0;}
body{background: #FFFF00;}
/******************/
.mydiv{width: 500px; height: 200px; padding: 7px;border: 1px solid red; margin: 100px auto; position: relative;}
.mydiv01{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.mydiv01 ul{
position: absolute;
left: 0px;
top: 0;
width: 3000px;
}
.mydiv01 ul li{
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.mydiv ol{
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
}
.mydiv ol li{
float: left;
width: 15px;
height: 15px;
background: #fff;
margin-left: 5px;
cursor: pointer;
font-size: 10px;
font-family: verdana;
line-height: 15px;
border-radius: 15px;
text-align: center;
}
.mydiv ol li.current{ background: yellow;}javascript脚本文件mytest.js:
//页面加载时要执行的函数
window.onload= function(){
//获取大盒子mydiv
var mydiv=document.getElementById("mydiv");
//获取第一个盒子的UL节点
var ul=mydiv.children[0].children[0];
//获取UL中的所有子节点
var ullis=ul.children;
//克隆ul第一个字节点到最后
ul.appendChild(ullis[0].cloneNode(true));
//获取大盒子mydiv第二个子节点
var ol=mydiv.children[1];
//在ol下创建li子节点
for(var i=0;i<ullis.length-1;i++){
//创建li节点元素
var li=document.createElement("li")
//为创建的节点赋值
li.innerHTML=i+1;
//将创建的子节点作为ol的子节点
ol.appendChild(li);
}
//获取ol中所有子节点
var ollis=ol.children;
//初始化第一个子节点类选择器为current
ollis[0].className="current";
//开始动画，遍历所有ol子节点并为其赋值特定属性
for(var j=0;j<ollis.length;j++){
//为每个li元素赋值索引
ollis[j].index=j;
//为每个li元素添加鼠标事件
ollis[j].onmouseover=function(){
//清除所有类选择器
for(var k=0;k<ollis.length;k++){
ollis[k].className="";
}
//设置当前元素类选择器
this.className="current";
//调用动画函数
animate(ul,-this.index*ullis[0].offsetWidth);
//鼠标经过key square要等于当前索引（key:用来控制图片的键，square:用来控制的小方块）
key=square=this.index;
}
}
//定时器部分
var timer=0;
//定义控制图片的键
var key=0;
//定义控制小方块的键
var square=0;
//设置定时器的时间间隔为3秒执行一次指定函数
timer=setInterval(autoplay,3000);
//定义自动播放函数
function autoplay(){
//图片控制部分
key++;
if(key>ullis.length-1){
ul.style.left=0;
//第6张图片是第一张，所以从第2开始重新播放
key=1;
}
//调用动画函数
animate(ul,-key*ullis[0].offsetWidth);
//小方块控制部分
square++;
square=square>ollis.length-1? 0 :square;
for(var i=0;i<ollis.length-1;i++){
ollis[i].className="";
}
ollis[square].className="current";
}
//鼠标经过时停止定时器
mydiv.onmouseover=function(){
//清除定时器
clearInterval(timer);
}
//鼠标离开时启用定时器
mydiv.onmouseout=function(){
//设置定时器
timer=setInterval(autoplay,3000)
}
}
//obj：做动画的对象，target:当前动画相对于下一个动画的距离
function animate(obj,target){
//开启定时器之前把前面的定时器清楚掉
clearInterval(obj.timer);
var speed=obj.offsetLeft<target? 15 :-15;
obj.timer=setInterval(function(){
//若result为0则说明完全相等
var result=target-obj.offsetLeft;
//动画原理
obj.style.left=obj.offsetLeft+speed+"px";
if(Math.abs(result)<=15){
//抖动
obj.style.left=target+"px";
clearInterval(obj.timer);
}
},10)
}以下是实现效果截图：
