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