通過學(xué)習(xí)，我理解了圖片輪播原理，學(xué)習(xí)了setTimeout()、setInterval()函數(shù)設(shè)置定時(shí)器與清除定時(shí)器clearInterval()函數(shù)，使用函數(shù)遞歸實(shí)現(xiàn)圖片滑動(dòng)切換，采用輔助圖片實(shí)現(xiàn)圖片無限滾動(dòng)等編程技巧。
一、焦點(diǎn)圖輪播特效之原理
這個(gè)焦點(diǎn)圖輪播特效將運(yùn)用到了平時(shí)學(xué)習(xí)中的知識，例如，DOM操作、定時(shí)器、事件處理、JS動(dòng)畫、函數(shù)遞歸還有無線滾動(dòng)等等。
其實(shí)焦點(diǎn)圖輪播特效的原理十分簡單，就是通過控制存放圖片的列表里面的left值來顯示圖片。
HTML結(jié)構(gòu)大致分為以下部分：
<div id="container">
<div id="list" style="left:-600px;">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a><!--javascript:是一個(gè)偽協(xié)議，是表示在觸發(fā)<a>默認(rèn)動(dòng)作時(shí)，執(zhí)行一段javascript代碼，而javascript:;表示什么都不執(zhí)行，這樣點(diǎn)擊<a>標(biāo)簽沒有任何反應(yīng)-->
<a href="javascript:;" id="next" class="arrow">></a>
</div>
- 一個(gè)父容器container，父容器里面有一個(gè)圖片列表list還有一個(gè)按鈕buttons，再加上兩個(gè)代表左右箭頭的a標(biāo)簽；
- javascript： 是一個(gè)偽協(xié)議，是是表示在觸發(fā)a標(biāo)簽?zāi)J(rèn)動(dòng)作時(shí)，執(zhí)行一段javascript代碼，而javascript:;表示什么都不執(zhí)行，這樣點(diǎn)擊a標(biāo)簽沒有任何反應(yīng)；
- 為了實(shí)現(xiàn)無限滾動(dòng)，在第一張圖片之前加入第五張圖片的附屬圖，在第五張圖片之后加入第一張圖片的附屬圖，實(shí)得在滾動(dòng)的過程中，不會出現(xiàn)延遲現(xiàn)象；
二、焦點(diǎn)圖輪播特效之樣式布局
具體的CSS代碼如下：
<style>
*{
margin:0;
padding:0;
text-decoration:none;
}
body{
padding:20px;
}
#container{
width:600px;
height:400px;
border:3px solid #333;
overflow:hidden;
position:relative;
}
#list{
width:4200px;
height:400px;
position:absolute;
z-index:1;
}
#list img{
float:left;
}
#buttons{
position:absolute;
height:10px;
width:100px;
bottom:20px;
left:250px;
z-index:2;
}
#buttons span{
cursor:pointer;
float:left;
border:1px solid #fff;
width:10px;
height:10px;
border-radius:50%;
background:#333;
margin-right:5px;
}
#buttons .on{
background:orangered;
}
.arrow{
cursor:pointer;
display:none;
line-height:39px;
text-align:center;
font-size:36px;
font-weight:bold;
width:40px;
height:40px;
position:absolute;
z-index:2;
top:180px;
background-color:RGBA(0,0,0,.3);
color:#fff;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);
}
#container:hover .arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>
- 其中將父容器里面的overflow屬性設(shè)置為:hidden，并且將position設(shè)置為:relative，因?yàn)樽釉豯ist和buttons都是相對于父容器來定位的；
- 其中里面涉及到了z-index屬性：設(shè)置元素的堆疊順序。元素可擁有負(fù)的z-index屬性值，z-index僅僅能在定位元素上奏效，擁有更高層疊順序的元素總是位于更低元素的前面；
三、焦點(diǎn)圖輪播特效之箭頭切換
接下來就進(jìn)入JS部分的編寫，首先必須是頁面加載完畢才能執(zhí)行相關(guān)的JS代碼，所以必須寫在window.onload = function(){}中，接下來先取得相關(guān)的容器和標(biāo)簽，如下：
window.onload = function(){
var container = document.getElementById("container");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
}
然后要做到點(diǎn)擊箭頭就能切換，就必須給箭頭元素綁定一個(gè)點(diǎn)擊事件，通過點(diǎn)擊箭頭，來改變list里面style屬性中的left值，從而實(shí)現(xiàn)圖片的切換
prev.onclick = function(){
list.style.left = parseInt(list.style.left) - 600 + 'px';
}
next.onclick = function(){
list.style.left = parseInt(list.style.left) + 600 + 'px';
}
因?yàn)閮蓚€(gè)點(diǎn)擊事件里面的語句十分相似，所以就將它們封裝在一個(gè)名為animate()的函數(shù)中，只需要傳進(jìn)一個(gè)偏移量就可以了，如下
function animate(offset) {
list.style.left = parseInt(list.style.left) + offset + 'px';
}
prev.onclick = function(){
animate(-600);
}
next.onclick = function(){
animate(600);
}
四、焦點(diǎn)圖輪播特效之無限滾動(dòng)
在上一節(jié)，我們已經(jīng)實(shí)現(xiàn)了箭頭的切換，但是會有一個(gè)問題，當(dāng)切換到最左邊，或者最右邊時(shí)，會出現(xiàn)空白頁，因?yàn)楫?dāng)滾動(dòng)到第五張圖片的附屬圖時(shí)，此時(shí)的left值為0，當(dāng)繼續(xù)往左切換時(shí)，就會大于0，當(dāng)滾動(dòng)到第一張圖片的附屬圖時(shí)，此時(shí)的left值為-4200，當(dāng)繼續(xù)往右切換時(shí)，就會小于-4200，所以會出現(xiàn)空白現(xiàn)象；我們要達(dá)到的效果是，當(dāng)滾動(dòng)到第一張圖片的附屬圖時(shí)，此時(shí)將它的left值設(shè)置回-600，當(dāng)滾動(dòng)到第五張圖片的附屬圖時(shí)，將left值設(shè)置回-3000，才能達(dá)到無限滾動(dòng)的效果，具體代碼如下：
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if(newLeft > -600) {
list.style.left = -3000 + 'px';
}
if(newLeft < -3000) {
list.style.left = -600 + 'px';
}
}
此時(shí)就可以實(shí)現(xiàn)無限滾動(dòng)的效果了，這個(gè)時(shí)候，我們還需要加上小圓點(diǎn)的切換功能，這時(shí)候我們需要再引進(jìn)一個(gè)變量index，來顯示當(dāng)前顯示的是第幾張圖片，初始值為1；并且增加一個(gè)函數(shù)專門來亮起小圓點(diǎn)，如下：
function showButtons(){
buttons[index-1].className = "on";
}
每點(diǎn)擊一下左箭頭，index的值就要減1，每點(diǎn)擊一下右箭頭，index的值就加1，如下：
prev.onclick = function(){
index -= 1;
showButtons();
animate(-600);
}
next.onclick = function(){
index += 1;
showButtons();
animate(600);
}
但是這個(gè)時(shí)候會發(fā)現(xiàn)，以前的按鈕沒有關(guān)閉，而是全都亮了起來，此時(shí)就要改進(jìn)一下showButtons()函數(shù)，在亮起當(dāng)前按鈕的同時(shí)，將之前的按鈕至灰色，代碼如下：
function showButtons(){
for(var i = 0; i < buttons.length; i++) {
if(buttons[i].className == "on") {
buttons[i].className = "";
break;
}
}
buttons[index-1].className = "on";
}
還需要對index的值進(jìn)行限制，不能讓它無限的減下去，或者加上去，修改后的代碼如下：
prev.onclick = function(){
if(index == 5) {
index = 1;
} else {
index -= 1;
}
showButtons();
animate(-600);
}
next.onclick = function(){
if(index == 1) {
index = 5;
} else {
index += 1;
}
showButtons();
animate(600);
}
五、焦點(diǎn)圖輪播特效之按鈕切換
實(shí)現(xiàn)完了箭頭的切換，接下來就要實(shí)現(xiàn)按鈕的切換了，就是要分別給buttons數(shù)組里面的每個(gè)元素添加一個(gè)點(diǎn)擊事件，跟箭頭切換不同的是，按鈕切換的偏移量需要計(jì)算，有可能跨幾幅圖片切換，還有，每張圖片里面有個(gè)index屬性，顯示自己是第幾張圖片，如下：
for(var i = 0; i< buttons.length; i++) {
buttons[i].onclick = function() {
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;//更新index值
showButton();
}
}
- 這里面有一個(gè)點(diǎn)需要注意，span標(biāo)簽里面index屬性是屬于自定義屬性，不能通過點(diǎn)表示法來取得，所以要使用getAttribute()方法來獲取，即能取自定義屬性，又能取自身有的屬性；
此時(shí)還有一些需要優(yōu)化的地方，當(dāng)我位于當(dāng)前圖片的時(shí)候，再點(diǎn)擊當(dāng)前按鈕，后臺還會執(zhí)行，但是我們的理想情況應(yīng)該是，位于當(dāng)前圖片的時(shí)候，再點(diǎn)擊當(dāng)前按鈕，就應(yīng)該不做任何事情，加一個(gè)判斷語句，優(yōu)化后的代碼如下：
for(var i = 0; i< buttons.length; i++) {
buttons[i].onclick = function() {
if(this.className == 'on') {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;//更新index值
showButton();
}
}
六、焦點(diǎn)輪播圖之動(dòng)畫函數(shù)
在進(jìn)行圖片的切換過程中，圖片是緩慢的移動(dòng)切換的，而不是一張圖片一張圖片的切換過去，這不是我們想要的效果，這里就涉及到了javascript中的動(dòng)畫效果和函數(shù)；
它的原理是在切換的過程中，不斷地進(jìn)行一小段的位移，直到達(dá)到目標(biāo)值，清楚了原理，接下來就來寫代碼：
我們增加了位移總時(shí)間的變量、位移間隔還有計(jì)算出每次的位移量，并且定義了一個(gè)位移函數(shù)go()，當(dāng)每次的位移量小于0并且left大于新的left目標(biāo)值時(shí)，還有一種情況是，每次的位移量大于0并且left小于新的left目標(biāo)值時(shí)，left值就等于left加上每次的位移量，然后調(diào)用setTimeout函數(shù)不斷地遞歸調(diào)用，直到達(dá)到目標(biāo)值；
function animate(offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;//位移總時(shí)間
var interval = 10; //位移間隔
var speed = offset/(time/interval);//每次位移量
function go(){
if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speemd >0 && parseInt(list.style.left) < newLeft)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}
else{
animated = false;
list.style.left = newLeft + 'px';
if(newLeft > -600){
list.style.left = -3000 + 'px';
}
if(newLeft < -3000){
list.style.left = -600 + 'px';
}
}
}
go();
}
- 這里要注意的是，setTimeout()方法接受兩個(gè)參數(shù)，一個(gè)執(zhí)行的函數(shù)代碼，一個(gè)間隔，函數(shù)會在這個(gè)間隔后執(zhí)行一次，不會重復(fù)執(zhí)行，但是因?yàn)檎{(diào)用的是自身，所以相當(dāng)于遞歸不斷地重復(fù)執(zhí)行；
七、焦點(diǎn)圖輪播特效之自動(dòng)播放
我們會注意到，當(dāng)我們把鼠標(biāo)移出圖片列表時(shí)，圖片會自動(dòng)切換，當(dāng)把鼠標(biāo)移進(jìn)去時(shí)，就會停止自動(dòng)切換，這里，我們就需要引入兩個(gè)函數(shù)：play()還有stop()函數(shù)，并且為container父容器添加兩個(gè)事件：onmouseover還有onmouseout，具體的代碼如下：
function play(){
timer = setInterval(function(){
next.onclick();
},1500);
}
function stop(){
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
還重新定義了一個(gè)時(shí)間變量timer，并且執(zhí)行setInterval方法，經(jīng)過間隔時(shí)間不斷地執(zhí)行函數(shù)代碼，然后停止函數(shù)里面，就清楚調(diào)這個(gè)時(shí)間變量timer；
