簡單輪播圖實作（H5+CS3+JS&JQuery）
最終效果圖如下：
每2000毫秒自動輪播，滑鼠劃入顯示左右按鈕；進行手動點選按鈕左右切換。劃出隐藏按鈕并繼續進行自動播放。
***下面将貼出我的實作代碼：***
首先引入jquery
頁面Html
<body>
<div id="container">
<div id="div1" style="left:-2000px;">
<img src="4.jpg" alt="1">
<img src="5.jpg" alt="2">
<img src="6.jpg" alt="3">
<img src="7.jpg" alt="4">
<img src="4.jpg" alt="1">
<img src="5.jpg" alt="2">
</div>
<div id="buttons">
<span index="1" class="actived"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<div id="left-right">
<div id="left" onclick="pre()">‹</div>
<div id="right" onclick="af()">›</div>
<div>
</div>
</body>
css樣式：
#container{
border:solid;
width:500px;
height:320px;
margin:0 auto;
position:relative;
overflow: hidden;
}
#div1{
width:4200px;
height:300px;
position:absolute;
}
img{
float:left;
width:500px;
height:300px;
z-index: 2;
}
#buttons{//圓點導航框
position:absolute;
z-index: 1;
width: 130px;
height: 20px;
left:370px;
margin-left:-187.5px;
margin-top:298px;
}
#buttons span{//圓點樣式
position: relative;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 5px;
height: 5px;
top:8px;
left:35px;
margin-left: 5px;
border-radius: 50%;
float: left;
background-color:rgba(0,0,0,0.1);
}
#buttons .actived{//選中時樣式
border: 1px solid rgba(205,133,63,1);
background-color: rgba(205,133,63,1);
}
#left-right{
display: none;
position: relative;
top:143px;
width: 500px;
height: 50px;
}
#left,#right{//左右按鈕樣式
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
border-radius: 50%;
background-color:rgba(0, 0, 0, 0.1);
}
#left{
float:left;
}
#right{
float:right;
}
實作效果的js代碼
var timer;
//Dom元素加載完成後執行的代碼
$(document).ready(function() {
$("#container").mouseover(function(event){
clearInterval(timer);//清除計時器
setlr();
}).mouseout(function(event) {
$("#left-right").css("display","none");
play();
});
$("#left-right").click(function(event) {
setlr();
});
play();
});
//圖檔變換；
function animate(offset) {
var div = document.querySelector("#div1");
var newleft = parseInt(div.style.left) + offset;
if (newleft < -2000) {
div.style.left = -500 + "px";
} else if (newleft > -500) {
div.style.left = -2000 + "px";
} else {
div.style.left = newleft + "px";
}
changespan(parseInt(div.style.left));
};
//監聽圓點狀态；
function changespan(le){
$("span").attr("class","");
switch(le){
case -2000:
$("[index='1']").attr("class","actived");
break;
case -1500:
$("[index='2']").attr("class","actived");
break;
case -1000:
$("[index='3']").attr("class","actived");
break;
case -500:
$("[index='4']").attr("class","actived");
break;
} ;
};
//監聽按鈕顯示與隐藏；
function setlr(){
var div = document.querySelector("#div1");
$("#left-right").css("display","block");
if(parseInt(div.style.left) ==-2000 || (parseInt(div.style.left) + 1500)==-500){
$("#left").css("display","none");
$("#right").css({"display":"block","cursor":"pointer"});
}else if(parseInt(div.style.left)==-500 || (parseInt(div.style.left) + -1500)==-2000 ){
$("#left").css({"display":"block","cursor":"pointer"});
$("#right").css("display","none");
}else{
$("#left").css({"display":"block","cursor":"pointer"});
$("#right").css({"display":"block","cursor":"pointer"});
}
}
function play(){
timer=setInterval("animate(500)", 2000);
}
//左箭頭點選時，觸發事件；
function pre(){
animate(-500);
}
//右箭頭點選時，觸發事件;
function af(){
animate(500);
}
希望能幫到大家，謝謝！！
![H5測試點[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)