<div id="slider"> <div id="sliderImgs"> <img src="img/mi04.jpg" width="1000px"/> <img src="img/mi01.jpg" width="1000px" title="oneImg"/> <img src="img/mi02.jpg" width="1000px" title="twoImg"/> <img src="img/mi03.jpg" width="1000px" title="threeImg"/> <img src="img/mi04.jpg" width="1000px" title="fourImg"/> <img src="img/mi01.jpg" width="1000px"/> <!--因為要做無縫滾動，所以要克隆第一張和最后一張，放到最后一張后面和最前面--> </div> <div id="buttons"> <ul> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div>
<div> <span id="prev"><</span> <span id="next">></span> </div>
</div>
CSS部分
<style type="text/css"> *{ margin: 0; padding: 0; } /*禁止html元素別被鼠標選中,必須要寫不然會有bug,--start*/ *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; } /*禁止html元素別被鼠標選中--end*/ #slider{ width: 1000px; /*設置為圖片寬度*/ height: 376px; /*設置為圖片高度*/ margin: 0 auto; margin-top: 100px; overflow: hidden; position: relative; /*border: 2px solid palegreen;*/ } #sliderImgs{ width: 600%; /*幾張圖片就是 6*100% */ position: absolute; /*必須設置絕對定位，才能使用left屬性*/ left: -1000px; /*把第一張假圖偏移出去*/ /*border: 1px solid blue;*/ } #sliderImgs img{ float: left; } #buttons{ width: 70px; position: absolute; z-index: 1; /*設置圖片堆疊屬性，僅限於定位的元素使用。默認值為0，值越大，優先級越高*/ bottom: 10px; left: 45%; background-color: rgba(255,255,255,0.4); padding-top: 4px; padding-bottom: 4px; border-radius: 9px; /*高度一半 = 8px + 10px (li的height) */ /*border: 2px solid red;*/ } #buttons ul{ list-style-type: none; } #buttons ul li{ float: left; margin-left: 6px; width: 10px; height: 10px; line-height: 10px; border-radius: 100%; background-color: #FFFFFF; } #buttons ul li:hover{ cursor: pointer; /*手型光標*/ background-color:#FF5000; } #buttons .active{ background-color: #FF5000; } #next , #prev{ position: absolute; z-index: 1; top: 43%; color: rgba(255,255,255,.9); font-family: "微軟雅黑"; font-size: 25px; text-align: center; display: block; width: 40px ; height: 40px; line-height: 40px; border-radius: 100%; background-color: rgba(0,0,0,.4); transition: width 0.3s ,height 0.3s ,line-height 0.3s ,border-radius 0.3s, text-align 0.3s ,ease 0.3s ; } #prev{ left: 5%; } #next{ right: 5%; } #next:hover{ cursor: pointer; /*手型光標*/ width: 44px; height: 44px; line-height: 44px; border-radius:100%; text-align: center; } #prev:hover{ cursor: pointer; /*手型光標*/ width: 44px; height: 44px; line-height: 44px; border-radius:100% ; text-align: center; } </style>
布局效果圖：
JS部分
<script type="text/javascript">
var doc = document;
var sliderId = doc.getElementById('slider');
var sliderImgsId = doc.getElementById('sliderImgs');
var imgs = sliderImgsId.getElementsByTagName('img');
var btnLi = doc.getElementById('buttons').getElementsByTagName('li');
var btnPrev = doc.getElementById('prev');
var btnNext = doc.getElementById('next');
var imgsLength = imgs.length-2; //減去2個假圖
var btnLiLength = btnLi.length;
var imgWidth = sliderId.clientWidth; //獲取圖片寬度
var imgAnimateTimer = null; //圖片animate定時器
var aotuPlayTimer = null; //自動播放定時器
var index = 0; //當前圖片默認為第一張
var speed = 0; //動畫速度,這個數必須是能被圖片寬度500整除的。正負表示偏移方向
/*非常重要*/
var isAnimate = false; //圖片是否在動畫狀態。若在動畫狀態，此時動畫沒結束， 則不執行下一個動畫。
sliderImgsId.style.left = -imgWidth+"px"; //初始化為第一張真圖
btnPrev.onclick = function(){
if(isAnimate == false){ //圖片不在動畫狀態才執行
imgAnimate(imgWidth);
index--;
if(index<0){
index = imgsLength-1;
}
selectBtn();
}
}
btnNext.onclick = function(){
if(isAnimate == false){
imgAnimate(-imgWidth);
index++;
if(index>imgsLength-1){
index = 0;
}
selectBtn();
}
}
for(var i = 0 ; i<btnLiLength;i++){
btnLi[i].index = i;
btnLi[i].onclick = function(){
var toTargetImgOffset = (index - this.index)*imgWidth; //負數sliderimgsId向左偏轉，反之，向右
if(toTargetImgOffset == 0){return;}
if(isAnimate == false){
imgAnimate(toTargetImgOffset); //方法的參數是局部參數
index = this.index;
selectBtn();
}
}
}
function selectBtn(){
for(var i = 0; i < btnLiLength; i++){
if(btnLi[i].className == "active"){
btnLi[i].className = "";
break;
}
}
btnLi[index].className = 'active';
}
/*動畫函數*/
function imgAnimate(offset){
var newLeft = parseInt(sliderImgsId.style.left) + offset; //sliderImgsId.style.left永遠獲取都是當前圖片偏移量
var allTime = 400; //完成offset偏移量，總共所用時間。offset路程一定，時間越短，速度越快。此時間必須小於autoPlay間隔時間，否則，圖片運動還沒結束，ImgAnimate()再次被調用
var interval = 20; //定時器的間隔時間，值越小越好，因為越大，動畫越卡
var speed = offset/(allTime/interval); //speed正負由offset決定
isAnimate = true; //圖片動畫開始
clearInterval(imgAnimateTimer);
imgAnimateTimer = setInterval(function(){
sliderImgsId.style.left = parseInt(sliderImgsId.style.left)+speed +"px";
/* 第一種情況：當speed<0時,(即圖片向左運動時)
* 如果當前圖片left值 , left只會越來越小 , 當小於等於newLeft , 則停止圖片運動
* 第二種情況：當speed>0時,(即圖片向右運動時)
* 如果當前圖片的left , left只會越來越大 , 大於等於newLeft , 則停止圖片運動
* */
if( speed<0 && parseInt(sliderImgsId.style.left)<= newLeft || speed>0 && parseInt(sliderImgsId.style.left) >= newLeft){
clearInterval(imgAnimateTimer); //到達指定newleft位置停止動畫
isAnimate = false; //動畫執行結束
/*重新定位-- 讓圖片無限循環 --start*/
if(newLeft > -imgWidth){
sliderImgsId.style.left = -imgsLength*imgWidth +"px" ;
return;
}
if(newLeft < -imgsLength*imgWidth){
sliderImgsId.style.left = -imgWidth +"px" ;
return;
}
sliderImgsId.style.left = newLeft+"px";
/*重新定位-- 讓圖片無限循環 --end*/
/*圖片運動結束后。清除上一次定時器時間*/
window.onload();
}
},interval);
}
window.onload = function(){
if(isAnimate==false){
clearInterval(aotuPlayTimer);
aotuPlayTimer = setInterval(function(){
btnNext.onclick();
},5000); //圖片每格5s移動一次
}
}
/*鼠標移入sliderId事件*/
sliderImgsId.onmouseover = function(){
clearInterval(aotuPlayTimer);
}
/*鼠標移出sliderId事件*/
sliderImgsId.onmouseout =function(){
window.onload();
}
</script>