最近學習了一下通過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)
}以下是實現效果截圖：
