1.HTML代碼

<div id="wrap"><img src="images/1.jpg" alt="" class="on"><img src="images/2.jpg" alt=""><img src="images/3.jpg" alt=""><img src="images/4.jpg" alt=""><div class="btn"><span class="active"></span><span></span><span></span><span></span></div><i class="left" id="prev"></i><i class="right" id="next"></i> </div>

2.css代碼

#wrap{position: relative;width:590px;height: 470px; } #wrap img{position: absolute;top: 0;left: 0;/*display: none;*/opacity: 0;} #wrap .on{/*display: block;*/transition: 2s;opacity: 1; } .btn {position: absolute;bottom: 20px;left: 50%;margin-left: -44px; } .btn span{float: left;width: 8px;height: 8px;border:2px solid rgba(255,255,255,0.4);border-radius: 5px;margin-right: 10px; } .btn .active{background: white;cursor: pointer; } .left,.right{display: block;width: 37px;height: 53px;position: absolute;top: 50%;margin-top: -27px;cursor: pointer; } .left{background: url("images/arrow.png") left top; } .right{background: url("images/arrow.png") left -53px;right: 0; }

3.js代碼

window.onload = function () {var oWrap = document.getElementById('wrap');var aImg = oWrap.getElementsByTagName('img');var aBtn = oWrap.getElementsByTagName('span');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next');var iNow =0;function tab(){for (var i =0;i<aBtn.length;i++){//清空所有按鈕選中樣式以及圖片顯示樣式aBtn[i].className='';aImg[i].className='';}aBtn[iNow].className='active';//設置當前按鈕選中樣式以及當前圖片透明度aImg[iNow].className='on';}setInterval( function () {//每兩秒循環變換下一張圖片iNow++;if (iNow==aBtn.length)iNow=0;tab();},2000);for (var i =0;i<aBtn.length;i++){aBtn[i].index=i;//為按鈕添加自定義屬性（索引）目的是使圖片和按鈕相對應//按鈕aBtn[i].οnmοuseοver= function () {iNow=this.index; //是按鈕所控制顯示的圖片與左右箭頭控制顯示的圖片相對應tab();}//下一個箭頭oNext.onclick = function () {iNow++;if (iNow==aImg.length)iNow=0;tab();}//上一個箭頭oPrev.onclick = function () {iNow--;if (iNow==-1)iNow=aImg.length-1;tab();}}}

靜態效果圖：（不會截動態的）

?

總結

以上是生活随笔為你收集整理的用javaScript实现轮播图效果 包括自动变换，按钮控制，上一张下一张切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。