輪播圖
寫輪播圖之前我們要認(rèn)識到幾個(gè)問題:
一火本、什么是輪播圖?
二蓄喇、怎么實(shí)現(xiàn)輪播效果发侵?
三、輪播圖還有什么小功能可以實(shí)現(xiàn)妆偏?
那好我們先理解一下什么是輪播圖:
一刃鳄、什么是輪播圖:能夠?qū)崿F(xiàn)多張圖片循環(huán)出現(xiàn)效果的我們稱之為輪播圖。
例如:
上圖就是輪播圖钱骂,圖片中兩張圖片正在替換著出現(xiàn)叔锐。
二、怎么實(shí)現(xiàn)輪播效果见秽?
要實(shí)現(xiàn)輪播圖的效果有很多種方法愉烙,比如css3、框架解取、JavaScript等步责。
而今天我們要看的是我個(gè)人覺得最簡單的一種方法,即使是初學(xué)者也可以看懂并理解的方法禀苦,我們先來看下代碼:
<body>
![](../img/1.jpg)<!-- 插入圖片并設(shè)置圖片的大小 -->
</body>
<script>
var tu=document.getElementById("tu"); //獲取到id
var x=1; //定義一個(gè)變量x
function bian(){ //定義一個(gè)叫bian的function方法
x=x+1; //讓變量每次加一
if (x>6){x=1} //判斷當(dāng)播放到最后一張是切換到第一張
tu.src="img/"+x+".jpg"; //替換id為tu的src (因?yàn)檫@里要換圖片所以要用到變量x蔓肯,所以這里要用字符拼接)
}
setInterval(bian,1000); //給bian這個(gè)方法加上定時(shí)器時(shí)間為1000毫秒 </script>
在上面的html中我們可以看到這個(gè)方法是通過src途徑的圖片命名更改來實(shí)現(xiàn)輪播效果的,那么這里的限制就比較多振乏,例如:圖片的格式可能會不同蔗包、每張圖片都必須進(jìn)行有規(guī)律的命名等。
但是這對于初學(xué)者而言是比較好的一中方式慧邮,能讓他們在通過簡單的代碼來實(shí)現(xiàn)這樣的一個(gè)效果调限,更能激發(fā)他們學(xué)習(xí)的欲望。
三误澳、輪播圖還有什么小功能可以實(shí)現(xiàn)耻矮?
其他小功能包括:左右的按鈕的點(diǎn)擊切換,圖片下小圓點(diǎn)的點(diǎn)擊切換以及自動切換
這些小功能的實(shí)現(xiàn)我們明天繼續(xù)學(xué)習(xí)脓匿!