5_2.BOM--图片轮播

<div id="ad">
		<!--图片-->
		<ul>
			<li class="show"><a href="#"><img src="images/a.jpg"></a></li>
			<li><a href="#"><img src="images/b.jpg"></a></li>
			<li><a href="#"><img src="images/c.jpg"></a></li>
			<li><a href="#"><img src="images/d.jpg"></a></li>
		</ul>
		<!--小圆点-->
		<p>
			<span class="show" title="0"></span>
			<span title="1"></span>
			<span title="2"></span>
			<span title="3"></span>
		</p>
	</div>

//js
//查找要修改的元素：img&span
var img=document.querySelectorAll("#ad li");
var span=document.querySelectorAll("#ad span");

//功能1：自动轮播
var count=0;
//设置周期性定时器
var timer=setInterval(task,1000);
function task(){
	img[count].className="";
	span[count].className="";
	count++;
	if(count==img.length)count=0;
	img[count].className="show";
	span[count].className="show";
}

//功能2：鼠标移入移出，轮播停止开始
var ad=document.getElementById("ad");
ad.onmouseover=function(){
	clearInterval(timer);
	timer=null;
}
ad.onmouseout=function(){
	timer=setInterval(task,1000);
}

//功能3：移入小圆点，显示对应图片
for(var i=0;i<span.length;i++){
	span[i].onmouseover=function(){
	/*第一种方法：优点是好理解，缺点是，要给每一个span一个固定的title属性值*/
		//判断移入的是否是当前显示的。
		/*if(count!=parseInt(this.title)){
			//如果不是，把当前的取消
			img[count].className="";
			span[count].className="";
			//把移入的下标赋值给count
			count=parseInt(this.title);
			//显示
			img[count].className="show";
			span[count].className="show";
//因为这样是通过改变下标count的值来改变显示位置，所以移开时，就会从当前count开始轮播。
		}*/
	/*第二种方法：优点：不需要title。缺点：慢*/
		for(var j=0;j<span.length;j++){
			if(this==span[j]){//通过遍历判断获得移入的小圆点的下标
				if(count!=j){
				//此if语句代码与第一种相同，第一种的title换成了j，都是表示获取到的下标
					img[count].className="";
					span[count].className="";
					count=j;
					img[count].className="show";
					span[count].className="show";
				}
				break;
			}
		}
	}
}

//css
ul{margin: 0;padding: 0;}

#ad{
	width: 480px;
	height: 360px;
	position: relative;
}
#ad li{
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: all 1s;
}
#ad p{
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
	text-align: center;
}
#ad p span{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #999;
	cursor: pointer;
}

#ad li.show{
	opacity: 1;
}
#ad p span.show{
	background: #fff;
}