HTML

<div id="content_img1">
<ul id="img1">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="content_img2">
<ul id="img2">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

這里我相信最多疑惑的是，明明五張圖片為何要在首尾加兩張圖片(li)做首尾呼應(yīng)呢？原因如下圖：

這里以向左滾動(dòng)的例子為說明

一開始布局的時(shí)候left: -470px;先處于第2個(gè)li也就是第2張圖，當(dāng)我們圖片陸續(xù)向左滾動(dòng)到第7張圖片的時(shí)候，迅速扯回到第2張圖，然后還是繼續(xù)向左滾動(dòng)。這樣看起來就像是假象式的無限向左滾動(dòng)循環(huán)，其實(shí)它里面只有7張圖組成。同樣的，如果實(shí)現(xiàn)向右滾動(dòng)，我們一開始布局的時(shí)候，先處于第1個(gè)li也就是第1張圖，當(dāng)我們圖片陸續(xù)向右滾動(dòng)到第6張圖片的時(shí)候，迅速扯回到第1張圖，然后還是繼續(xù)向右滾動(dòng)。其實(shí)上下滾動(dòng)輪播圖道理是一樣的，只不過少了一個(gè)float:left屬性，讓li垂直排列。

CSS

*{
margin: 0;
padding: 0;
list-style: none;
}
span{
width: 20px;
height: 20px;
display: block;
background-color: blanchedalmond;
border: 1px solid black;
float: left;
text-align: center;
line-height: 20px;
z-index: 1;
cursor: pointer;
margin: 120px 8px 0 0;
}
span.mouseover{
background-color: orange;
}
#content_img1{
position: relative;
width: 470px;
height: 150px;
border: 2px black solid;
margin: 30px auto;
overflow: hidden;
}
#img1{
position: absolute;
top: 0px;
left: -470px;
z-index: -1;
width: 700%;
height: 150px;
}
#img1>li{
width: 470px;
height: 150px;
float: left;
}
#content_img2{
position: relative;
width: 470px;
height: 150px;
border: 2px black solid;
margin: 30px auto;
overflow: hidden;
}
#img2{
position: absolute;
top: -150px;
left: 0px;
z-index: -1;
width: 470px;
height: 700%;
}
#img2>li{
width: 470px;
height: 150px;
}

javascript函數(shù)方法

window.onload=function(){
var cont_img1=document.getElementById("content_img1");
var spannum1=cont_img1.getElementsByTagName("span");
var img1=document.getElementById("img1");
var cont_img2=document.getElementById("content_img2");
var spannum2=cont_img2.getElementsByTagName("span");
var img2=document.getElementById("img2");
 
 //向左輪播圖的span"按鈕"鼠標(biāo)經(jīng)過事件
 
 for(var i=0;i<spannum1.length;i++){
spannum1[i].index=i;
spannum1[i].onmouseover=function(){
for(var p=0;p<spannum1.length;p++){
if(spannum1[p]==this){
spannum1[p].className="mouseover";
}else{
spannum1[p].className="";
}
}
clearTimeout(img1.timer1);
now=this.index;
scrollimg1(img1,spannum1);
 }
}
 
 //向左輪播的主函數(shù)調(diào)用
scrollimg1(img1,spannum1);
 
 //向上輪播圖的span"按鈕"鼠標(biāo)經(jīng)過事件
 
for(var i=0;i<spannum2.length;i++){
spannum2[i].index=i;
spannum2[i].onmouseover=function(){
for(var p=0;p<spannum2.length;p++){
if(spannum2[p]==this){
spannum2[p].className="mouseover";
}else{
spannum2[p].className="";
}
}
clearTimeout(img2.timer1);
nows=this.index;
scrollimg2(img2,spannum2);
 }
}
 
 //向上輪播的主函數(shù)調(diào)用
scrollimg2(img2,spannum2);
 
}
 
 var now=1;
 function scrollimg1(obj,spannum1){
 if(obj.offsetLeft<=-(obj.children.length-1)*obj.children[0].offsetWidth){//達(dá)到極限的計(jì)算位置，既是最后一個(gè)圖就馬上扯回初始位置
 now=0;
 obj.style.left=-(++now)*obj.children[0].offsetWidth+"px";
 }else{
 Move(obj,-obj.children[0].offsetWidth*(++now),"left",5,30);//否則圖片進(jìn)行向左運(yùn)動(dòng)的緩沖動(dòng)畫
 }
 for(var i=0;i<spannum1.length;i++){
 
spannum1[i].className="";
 }
 spannum1[(now-1)%spannum1.length].className="mouseover";
 obj.timer1=setTimeout(function(){//每3秒鐘進(jìn)行函數(shù)的回調(diào)，實(shí)現(xiàn)無限循環(huán)的圖片輪播
 
scrollimg1(obj,spannum1);
 },3000);
 }
 
 var nows=1;
 function scrollimg2(obj,spannum2){
 if(obj.offsetTop<=-(obj.children.length-1)*obj.children[0].offsetHeight){//達(dá)到極限的計(jì)算位置，既是最后一個(gè)圖就馬上扯回初始位置
 nows=0;
 obj.style.top=-(++nows)*obj.children[0].offsetHeight+"px";
 }else{
 Move(obj,-obj.children[0].offsetHeight*(++nows),"top",5,30);//否則圖片進(jìn)行向左運(yùn)動(dòng)的緩沖動(dòng)畫
 }
 for(var i=0;i<spannum2.length;i++){
 
spannum2[i].className="";
 }
 spannum2[(nows-1)%spannum2.length].className="mouseover";
 obj.timer1=setTimeout(function(){//每3秒鐘進(jìn)行函數(shù)的回調(diào)，實(shí)現(xiàn)無限循環(huán)的圖片輪播
 
scrollimg2(obj,spannum2);
 },3000);
 }
 
 
 
function Move(obj,target,stylename,average,cycle,continuefunction){參數(shù)類型:(對(duì)象，目標(biāo)值，改變的樣式屬性，緩沖系數(shù)(速度與大小成反比)，周期時(shí)間(速度與大小成反比),回調(diào)函數(shù)(可有可無))
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
if(stylename=="opacity"){
var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
var speed=(target-offvalue)/average;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
 }else{
obj.style[stylename]=(offvalue+speed)/100;
obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
 }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(target-offvalue)/average;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
 }else{
obj.style[stylename]=offvalue+speed+"px";
 }
}
},cycle);
}
function getStyle(obj,stylename){//對(duì)象樣式屬性大小獲取函數(shù)
if(obj.currentStyle){
return obj.currentStyle[stylename];
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}

這種通過計(jì)算位置輪播算法的好處是，可以在我的樣式范圍內(nèi)，在HTML的<ul id="img"></ul>內(nèi)無限添加li里的圖片，但是要記得要在首尾加前后呼應(yīng)的li圖片，并且根據(jù)圖片大小來更改樣式，就能實(shí)現(xiàn)圖片輪播。