简单的js轮播图

Html

Css

* {
	margin:0;
	padding:0;
	list-style:none;
}
.wrap {
	height:220px;
	width:330px;
	margin:60px auto;
	position:relative;
	overflow:hidden;
}
.wrap ul {
	position:absolute;
}
.wrap ul li {
	height:220px;
}
.wrap ol {
	position:absolute;
	right:5px;
	bottom:10px;
}
.wrap ol li {
	height:20px;
	width:20px;
	background:#ddd;
	border:1px solid #969591;
	border-radius:50%;
	margin-left:5px;
	color:#959490;
	float:left;
	text-align:center;
	cursor:pointer;
}
.wrap ol .on {
	background:#8F9E9E;
	color:#fff;
}

window.onload = function() {
     var wrap = document.getElementById('wrap'),
         pic = document.getElementById('pic'),
         list = document.getElementById('list').getElementsByTagName('li'),
         index = 0,
         timer = null;

// 若果有在等待的定时器，则清掉
     if (timer) {
         clearInterval(timer);
         timer = null;
     }

// 自动切换
     timer = setInterval(autoPlay, 2000);

// 定义并调用自动播放函数
     function autoPlay() {
         index++;
         if (index >= list.length) {
             index = 0;
         }
         changeImg(index);
     }

// 定义图片切换函数
     function changeImg(curIndex) {
         for (var j = 0; j < list.length; j++) {
             list[j].className = "";
         }
         // 改变当前显示索引
         list[curIndex].className = "on";
         pic.style.marginTop = -220 * curIndex + "px";
         index = curIndex;
     }

// 鼠标划过整个容器时停止自动播放
     wrap.onmouseover = function() {
         clearInterval(timer);
     }

// 鼠标离开整个容器时继续播放至下一张
     wrap.onmouseout = function() {
         timer = setInterval(autoPlay, 2000);
     }

// 遍历所有数字导航实现划过切换至对应的图片
     for (var i = 0; i < list.length; i++) {
         list[i].id = i;
         list[i].onmouseover = function() {
             clearInterval(timer);
             changeImg(this.id);
         }
     }
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的js轮播图



代码描述：简单的js轮播图,代码有注释一看就明白

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Amy??

相关代码

简单的js轮播图

最新