图片自动切换

HTML

HTML

<div class="box" id="box">
	<img src=""/>
	<ul></ul>
</div>

CSS

*{
	margin: 0;
	padding: 0;
}
.box{
	width: 300px;
	margin: 50px auto 0;
}
.box:after{
	display: block;
	clear: both;
	content: "";
}
img{
	width: 240px;
	height: 400;
	float: left;
}
ul{
	float: right;
}
li{
	list-style: none;
	width: 50px;
	height: 30px;
	background: #ccc;
	margin-bottom: 10px;
}
.act{
	background: orangered;
}

JS

var imgArry=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510217826769&di=b484707139bbe78102b5041524727ece&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ffcfaaf51f3deb48f99bce731fa1f3a292cf57803.jpg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510218288590&di=93181c4ba0e321818256dc5a2f8d635d&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F241f95cad1c8a786400d59236c09c93d70cf50f3.jpg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510218334670&di=7703f209c5370c371d0c0b8504be5706&imgtype=0&src=http%3A%2F%2Fatt.x2.hiapk.com%2Fforum%2F201312%2F02%2F2023313f0jgf6gkcnka06d.jpg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510218380897&di=98f269f2fe5df00b668e22c24d227046&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dc58dc33a454a20a425133484f83bf257%2F472309f790529822f495a2ebddca7bcb0a46d470.jpg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510218419877&di=7277237fc22e9cd35e484e350911bda5&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D4cb6709db6315c60579863ace5d8a166%2F35a85edf8db1cb13e51ce09bd754564e93584bc5.jpg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510218439121&di=1b7d3ad53af70028201a52de93f9d153&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3De811e3ca87b1cb132a643450b53d3c3b%2F48540923dd54564e4ee16c1cb9de9c82d1584f0b.jpg"
			]
var oImg=document.getElementsByTagName("img")[0];
var oUl=document.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var num=0;
var timer=null;

//生成右边按钮
for (var i=0;i<imgArry.length;i++) {
	oUl.innerHTML+="<li></li>";
}
//页面初始化
fn(0)

//鼠标移入切换图片
for (var i=0;i<imgArry.length;i++) {
	aLi[i].index=i;
	aLi[i].onmouseover=function(){
		clear();
		fn(this.index);
		//清除定时器
		clearInterval(timer);
		num=this.index;
	}
	
	//鼠标移出继续自动切换图片
	aLi[i].onmouseout=function(){
		timer=setInterval(function(){
			clear();
			num++;
			num%=imgArry.length;
			fn(num);
		},1500)
	}
}
//图片自动切换
timer=setInterval(function(){
	clear();
	num++;
	num%=imgArry.length;
	fn(num);
},1500)


function fn(num1){
	oImg.src=imgArry[num1];
	aLi[num1].className="act";
}
function clear(){
	for (var i=0;i<imgArry.length;i++) {
		aLi[i].className="";
	}
}