HTML之水平輪播

以前學的輪播，是將要顯示的圖片透明度置爲1，其餘圖片透明度置爲0。此次學了水平輪播，大概思路是：

按按鈕後會將對應的圖片顯示在藍色框框內。接下來寫實現的代碼（標籤和標籤的樣式和以前輪播的同樣，就不貼出來了）：

建立當即執行函數(function(){})();在執行函數內聲明變量

var currIndex;//用來記錄當前照片

而後實現執行函數init()，一開始咱們只有4張圖片，先將第一張圖片複製後插在最後一張圖片後面，將最後一張圖片複製插在第一張圖片前面。

function init(){
    currIndex = 1;//將第一張圖片設置爲當前圖片
    //將第一張圖片複製後插在最後一張圖片後面，將最後一張圖片複製插在第一張圖片前面
    var li_1 = document.querySelector('#slider #list #item:first-of-type');
	var copy_1 = li_1.cloneNode(true);
	var li_last = document.querySelector('#slider #list #item:last-of-type');
	var copy_last = li_last.cloneNode(true);
    var list = document.querySelector('#slider #list');
	list.appendChild(copy_1);//把第一個節點的複製品插到最後
	list.insertBefore(copy_last,li_1);//把最後一個節點的複製品插到第一
	lis = document.querySelectorAll('#list #item');
	liWidth = lis[0].offsetWidth;
	len = lis.length;
    lis = document.querySelectorAll('#list #item');//獲取全部存照片的li標籤
	liWidth = lis[0].offsetWidth;獲取一張圖片的寬度
	len = lis.length;//獲取圖片的張數
    list.style.width = liWidth * len + 'px';//設置存放全部圖片的ul標籤的寬度，目的是將圖片水平排放
	list.style.left = -liWidth + 'px';//將left設置爲-liWidth，是爲了顯示第一張圖片（第一張圖片前面還有一張圖片）
}

接下來實現slideNext()、slidePrev()函數

function slideNext(){
					currIndex++;
					slideTo(currIndex);
				}
				function slidePrev(){
					currIndex--;
					slideTo(currIndex);
				}

接下來實現圖片變換的函數slideTo（index）

function slideTo(index){
					var list = document.querySelector('#slider #list');
					if(index === len){//若是當前圖片是最後一張的下一張，也就要指向第二張圖片
						currIndex = index = 2;//轉到第二張,len-1 是第一張的複製品 ,因此index==len的時候就是要訪問第二張 因此currindex要轉到第二張的位置
						list.style.left = -liWidth + 'px';//將真正的第一張圖片設置爲當前圖片，以便等下訪問第二張圖片的時候，切換效果平滑。
					}
					
					if(index === -1){
						currIndex = index = len - 3; //  轉到倒數第二張 
						list.style.left = -(len - 2) *liWidth +'px';//與上面同理
					}
					var left = -index *liWidth ;
					animate(list,{left:left})
				}

接下來在init函數內實現點擊先後按鈕圖片水平切換：

document.querySelector('.prev').onclick = function(){
						slidePrev();
					}
					document.querySelector('.next').onclick = function(){
						slideNext();
					}

完成後，接下來就是實現點擊方塊圖片水平切換。在init函數內將小方塊和圖片進行綁定，這裏要注意：第一個小方塊對應的圖片應該是真正的第一張圖片，也就是querySelectorAll(#slider #item)[1]。

var bullets = document.querySelectorAll('#block .bullet');
					//點擊方框切換圖片
					for(var i=0;i<bullets.length;i++){
						bullets[i].index = i+1;
						bullets[i].onclick = function(){
							currIndex = this.index;
							slideTo(currIndex);
						}
					}

而後就是愛slideTo函數內添加小方塊操做的代碼

var focusIndex ; //用來存當前方塊
					if(index === 0){//圖片指向第一張前面那張最後一張的複製品，小方塊也就要指向最後一個
						focusIndex = bullets.length - 1 ;
					}else if(index === len-1){//圖片指向最後一張圖片後面那張第一張的複製品，小方塊也就要指向第一個
						focusIndex = 0;
					}else{
						focusIndex = index -1;
					}
					document.querySelector('.focus').className = 'bullet';//將當前小方塊的焦點取消
					bullets[focusIndex].className = 'bullet focus';//設置要切換的圖片對應的小方塊爲焦點

這樣圖片水平輪播基本就完成了，後面的自動水平輪播和鼠標移上圖片中止輪播的實現代碼和以前寫的輪播代碼同樣，就不貼出來了。

輪播：https://my.oschina.net/u/4069817/blog/3029995