web 轮播图（2）

轮播图的第二种思路

通过修改opacity，z-index来实现轮播，通过tranfrom属性，可以让图片淡入淡出。js的实现与第一种基本一样，html则是只需container（显示框） 与 container的孩子元素-装载图片的div。

html代码：

<div id="box"><!-- container，容器 -->
    		<div class="img_a"><!-- 装图片的div -->
    			<img src="img/1.jpg">
    		</div>
    		<div class="img_a">
    			<img src="img/3.jpg">
    		</div>
    		<div class="img_a">
    			<img src="img/4.jpg">
    		</div>
    		<div class="img_a">
    			<img src="img/5.jpg">
    		</div>
    		 <div class="img_a">
    			<img src="img/6.jpg">
    		</div>
            <!-- 前一张后一张图片的按钮 -->
            <img src="img/new_l.png"  id="left" class="a">
            <img src="img/new_r.png" id="right" class="a">
            <!-- 底部小圆点 -->
             <div id="xyd">
                <a href="#" class="a_a"></a>
                <a href="#" class="a_a"></a>
                <a href="#" class="a_a"></a>
                <a href="#" class="a_a"></a>
                <a href="#" class="a_a"></a>
            </div>  
    	</div>

css代码：

*{
	padding:0px;
	margin: 0px;
}
#box{
	width: 730px;
	overflow: hidden;/*超出部分隐藏*/
	position: relative;/*相对布局*/
	height: 336px;
	margin:0 auto;
}
.img_a{
	z-index: -1;/*设置为-1，保证当前图片上不会有其他透明度为0的图片存在*/
    opacity: 0;/*设置初始透明度为0*/
    /*display: none;*/
}
#box div{
	position: absolute;/*绝对布局*/
	transition: opacity 2s ease-in;/*使得透明度改变过程可见，淡入淡出*/
}
.on{
	opacity: 1;/*on为开关，需要轮播的图片class调整为这个*/
}

/*以下不重要*/

.a{
	position: absolute;
	 cursor:pointer;
}
#left{
	top: 150px;
	left: 5px;	
}
#right{
	top: 150px;
	right: 5px;	
}

#xyd{
	top: 280px;
	left: 350px;
	position: absolute;
	z-index: 1;
}
.a_a{
	display: inline-block;
	margin: 5px;
    width: 5px;
    height: 5px;
    border-radius: 20px;
    border:1px solid #8E8E8E;
    background:#ADADAD;
}
.a_b{
	display: inline-block;
	margin: 5px;
    width: 5px;
    height: 5px;
    border-radius: 20px;
  	border:1px solid #FFFFFF;
    background:#FFFFFF;
}

transition: opacity 2s ease-in;使得透明度改变过程可见，淡入淡出的css实现语句。也可用于其他属性的改变是上。

js代码：

与轮播图①大同小异，不多讲。其中move（）用于改变对应图片盒子的class名，从而改变opacity和z-index值，而next（）则是用于实现index值的改变和记录，index则是记录了当前的轮播图片的位置。

window.οnlοad=function(argument) {
	// body...
	var t1;//定时器变量
	var index = 0;//标记当前轮播图片的位置 
	var c = document.getElementById('box');
	var c_c= c.getElementsByTagName('div');//提出box下所有div并通过下面的循环，将img_a存入imgArr中
	var imgArr = [];//设置图片容器的列表
	for (var i = 0; i < c_c.length; i++) {
		if (c_c[i].className == "img_a") {
			imgArr.push(c_c[i]);
		}
	};
	// console.log(imgArr);
	var xydArr = document.getElementById("xyd").getElementsByTagName("*");//提出所有小圆点的元素

	function play() {//设置定时器
		t1 = window.setInterval(function(){
			// console.log(index);
			index = next(xydArr,imgArr,index);//通过next使得index值增加，并得到当前的index值
			
		},3000);
	}
	play();//启动定时器 
	//小圆点
	for (var i = 0; i < xydArr.length; i++) {//给所有小圆点设置事件
		(function(i) {
			xydArr[i].onmouseover = function(){
				clearInterval(t1);
				move(xydArr,imgArr,i);
				// this.className="a_b";
	    	}
	    	xydArr[i].onmouseout = function(){
				play();
				// this.className="a_b";
	    	}
	    	
		})(i);
	}


	//left and right
	var left = document.getElementById('left');
	var right = document.getElementById('right');
	
	function l_r(lORr) {
		lORr.onmouseover = function(){
		clearInterval(t1);
		// console.log(t1);
	}
	lORr.οnmοuseοut=function(){
		play();
		}
	}
	l_r(left);
	l_r(right);
	left.οnclick=function(){
		if (index - 1==-1) {
			index = 4;
		}
		else{
			index = index - 1;
		}
		move(xydArr,imgArr,index);
		clearInterval(t1);
		
	}
	right.οnclick=function(){
		if (index + 1==5) {
			index = 0;
		}
		else{
			index = index + 1;
		}
		move(xydArr,imgArr,index);
		clearInterval(t1);
		
	}


}

function next(xydArr,imgArr,index){//得到下一步要显示图片的index值
	index += 1;
	if (index == 5) {
		index = 0;
	}
	move(xydArr,imgArr,index);
	return index;//返回index值，用于标记
}

function move(xydArr,imgArr,index){//通过三个参数，先将imgArr和xydArr全部初始化，再将index对应的className改为“on”和“a_b”
	for (var i = 0; i < imgArr.length; i++) {
		imgArr[i].className = "img_a";
		xydArr[i].className = "a_a";
	};
	// console.log(imgArr[index]);
	imgArr[index].className="on";
	xydArr[index].className="a_b";
}

总结：总体来说，定时器问题还是没搞明白，但先放到一边了。透明度的淡入淡出，会比左右滑动更易实现。左右滑动的用transition，在最后一张图片跳回第一张时，会经过中间多张，看起来很不舒服。其他部分由于差不多，实现倒也不是很难。

下一步：实现左右滑动的平滑轮播。