10.21-JavaScript輪播圖

標籤：over   sha   list   數字   圖片   amp   size   timer   relative   

輪播圖的製作方法有許多種

我覺得最常用的是把所有圖都放進一個div裡，然後只顯示第一張，其餘的都隱藏，然後再一張張顯示出來：

<div id="container">        <div id="list" style="left: -600px;">            <img src="img/5.jpg" alt="1" />            <img src="img/1.jpg" alt="1" />            <img src="img/2.jpg" alt="2" />            <img src="img/3.jpg" alt="3" />            <img src="img/4.jpg" alt="4" />            <img src="img/5.jpg" alt="5" />            <img src="img/1.jpg" alt="5" />        </div></div>

#container {            position: relative;            width: 600px;            height: 400px;            border: 3px solid #333;            overflow: hidden;        }                #list {            position: absolute;            z-index: 1;            width: 4200px;            height: 400px;        }                #list img {            float: left;            width: 600px;            height: 400px;        }

 

我用的是老師之前的方法，就是圖個簡便，把圖片首碼名改成1234，然後利用for迴圈，把數字改變，顯示出不同的圖片：

 

<div id="tp">    <img src="img/1.png"></div>    <button id="syz" onClick="one(‘shang‘)">&lt;</button>    <button id="xyz" onClick="one(‘xia‘)">&gt;</button>

var d =3;    function one(type){        var hh = document.getElementById("tp").innerHTML=‘<img src="img/‘+d+‘.png">‘        if(type=‘shang‘){            d--;            if(d==0){                d=3;            }        }else if(type=‘xia‘){            d++;            if(d==3){                d=1;            }        }    }

 

 

定時函數

settimout()    是執行一次命令

setInterval()  是重複執行命令

這樣的話就可以設定自動輪播：

var timer;function play() {    timer = setInterval(function(){        syz.onclick()    }, 3500)}play();

讓它停下來的方法就是

window.clearInterval(intervalID)

intervalID是你想要取消的定時器的ID,這個ID是個整數,是由setInterval()返回的。

 

ps：滑鼠放上去停止還沒做好…………

 

10.21-JavaScript輪播圖