<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????????*{margin:0;
????????????padding:0;
????????????list-style:none;}
????????.wrap{height:170px;
????????????width:490px;
????????????overflow:?hidden;
????????????position:?relative;
????????????margin:100px?auto;}
????????.wrap?ul?li?img{height:170px;width:?100%}
????????.wrap?ol{position:absolute;
????????????right:5px;
????????????bottom:10px;}
????????.wrap?ol?li{height:20px;?width:?20px;
????????????background:#ccc;
????????????border:solid?1px?#666;
????????????margin-left:5px;
????????????color:#000;
????????????float:left;
????????????line-height:20px;
????????????text-align:center;
????????????cursor:pointer;}
????????.wrap?ol?.on{background:#E97305;
????????????color:#fff;}
????</style>
????<script?type="text/javascript">
????????window.onload=function(){
????????????var?wrap=document.getElementById('wrap');
????????????????????pic=document.getElementById('pic');
????????????????????img=pic.getElementsByTagName("img");
????????????????????list=document.getElementById('list').getElementsByTagName('li');
????????????????????index=0;
????????????????????timer=null;
????????????if?(timer)?{
????????????????clearInterval(timer);
????????????????timer?=?null;
????????????}
????????????//?定義并調用自動播放函數
?timer=setInterval(function(){autoPlay()},2000);
????????????function?autoPlay(){
????????????????index++;
????????????????if(index>=list.length){index=0}
????????????????changOption(index);
????????????}
????????//?鼠標劃過整個容器時停止自動播放
?wrap.onmouseover=function(){
????????????????clearInterval(timer);
????????????};
????????//?鼠標離開整個容器時繼續播放至下一張
?wrap.onmouseout=function?()?{
????????????????setInterval(function(){autoPlay()},2000);
????????????};
????????//?遍歷所有數字導航實現劃過切換至對應的圖片
?for?(var?i?=?0;?i?<?list.length;?i++)?{
????????????????list[i].aa?=?i;
????????????????list[i].onmouseover?=?function?()?{
????????????????????changOption(this.aa);
????????????????};
????????????????list[i].onmouseout?=?function?()?{
????????????????????setInterval(function?()?{
????????????????????????autoPlay()},?2000);
????????????????}
????????????}
????????????function?changOption(currIndex){
????????????????if?(timer)?{
????????????????????clearInterval(timer);
????????????????????timer?=?null;
????????????????}
????????????????for?(var?j?=?0;?j?<?list.length;?j++)?{
????????????????????list[j].className?=?"";
????????????????????img[j].style.display?=?"none";
????????????????}
????????????????list[currIndex].className?=?"on";
????????????????img[currIndex].style.display?=?"block";
????????????????index=currIndex;
????????????}
????????}
????</script>
</head>
<body>
<div?class="wrap"?id='wrap'>
????<ul?id="pic">
????????<li><img?src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg"?alt=""></li>
????????<li><img?src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg"?alt=""></li>
????????<li><img?src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg"?alt=""></li>
????????<li><img?src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg"?alt=""></li>
????????<li><img?src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg"?alt=""></li>
????</ul>
????<ol?id="list">
????????<li?class="on">1</li>
????????<li>2</li>
????????<li>3</li>
????????<li>4</li>
????????<li>5</li>
????</ol>
</div>
</body>
</html>
2016-10-17
你div都有定時器，還有就是你上面的定時器和下面onmouseout的定時器不是一個，就是說，你一共用了三個= = ，所以你那個使勁跳
2016-10-17
還有一個clearInterval(timer);應該放在onmouseover方法里
2016-10-17
?window.onload=function(){
? ? ? ? ? ? var wrap=document.getElementById('wrap');
? ? ? ? ? ? ? ?var ? ? pic=document.getElementById('pic');
? ? ? ? ? ? ? ? ?var ? img=pic.getElementsByTagName("li");
? ? ? ? ? ? ? ? ? var ?list=document.getElementById('list').getElementsByTagName('li');
? ? ? ? ? ? ? ? ? ?var index=0;
? ? ? ? ? ? ? ? ? ?var ?timer=null;
? ? ? ? ? ? if (timer) {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? timer = null;
? ? ? ? ? ? }
? ? ? ? ? ? // 定義并調用自動播放函數
?
? ? ? ? ? ? function autoPlay(){
? ? ? ? ? ? ? ? index++;
? ? ? ? ? ? ? ? if(index>=list.length){index=0}
? ? ? ? ? ? ? ? changOption(index);
? ? ? ? ? ? }
timer=setInterval(autoPlay,2000);
? ? ? ? // 鼠標劃過整個容器時停止自動播放
?
? ? ? ? // 遍歷所有數字導航實現劃過切換至對應的圖片
? ? ? ? ? ? ?for (var i = 0; i < list.length; i++) {
? ? ? ? ? ? ? ? list[i].aa = i;
? ? ? ? ? ? ? ? list[i].onmouseover = function () {
? ? ? ? ? ? ? ? ? ? changOption(this.aa);
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? list[i].onmouseout = function () {
clearInterval(timer);
? ? ? ? ? ? ? ? ? timer=setInterval(autoPlay,2000);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? function changOption(currIndex){
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? for (var j = 0; j < list.length; j++) {
? ? ? ? ? ? ? ? ? ? list[j].className = "";
? ? ? ? ? ? ? ? ? ? img[j].style.display = "none";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? list[currIndex].className = "on";
? ? ? ? ? ? ? ? img[currIndex].style.display = "block";
? ? ? ? ? ? ? ? index=currIndex;
? ? ? ? ? ? }
? ? ? ? }
?
2016-08-04
從未見過如此鬼畜的輪播圖片(﹁"﹁)