為什么沒效果??？？？？ 求大神指出錯誤
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
? *{margin:0;
? ? padding:0;
? ? list-style:none;}
? .wrap{height:170px;
? ? ? ? width:490px;
? ? ? ? margin:60px auto;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? margin:100px auto;}
? .wrap ul{position:absolute;}?
? .wrap ul li{height:170px;}
? .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:center;
? ? ? ? ? ? ? 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').getElementsByTagName('li'),
? ? ? ? list=document.getElementById('list').getElementsByTagName('li'),
? ? ? ? index=0,
? ? ? ? timer=null;
? ? ? // 定義并調(diào)用自動播放函數(shù)
? ? ? if(timer){
? ? ? ? ? clearInterval(timer);
? ? ? }
? ? ? timer=setIntervl(autoplay,2000);
? ? ? function autoplay(){
? ? ? ? ? index++;
? ? ? ? ? if(index>=list.length){
? ? ? ? ? ? ? index=0;
? ? ? ? ? }
? ? ? ? ? change_image(index);
? ? ? }
? ? ? // 定義圖片切換函數(shù)
? ? ? function change_image(curIndex){
? ? ? ? ? for(j=0,j<list.length-1,j++){
? ? ? ? ? ? list[j].className="";
? ? ? ? ? ? pic[j].style.display="none";
? ? ? ? ? }
? ? ? ? ? list[curIndex].className="on";
? ? ? ? ? pic[curIndex].style.display="block";
? ? ? ? ? index=curIndex;
? ? ? }
? ? ??
? ? ?
? ? ?// 鼠標劃過整個容器時停止自動播放
? ? ?wrap.onmouseover=function(){
? ? ? ? ?clearInterval(timer);
? ? ? ? ?timer=null;
? ? ?}
? ? ?// 鼠標離開整個容器時繼續(xù)播放至下一張
? ? ?wrap.onmouseout=function(){
? ? ? ? ?timer=setIntervl(autoplay,2000);
? ? ?}
? ??
? ? ?// 遍歷所有數(shù)字導航實現(xiàn)劃過切換至對應(yīng)的圖片
? ? ?for(i=0,i<list.length-1,i++){
? ? ? ? ?list[i].id=i;
? ? ? ? ? list[i].onmouseover=function(){
? ? ? ? ? ? change_image(this.id);
? ? ? ? ? ? clearInterval(timer);
? ? ? ? }
? ? ?}
? ? ? ??
? </script>
</head>
<body>
? <div 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>1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? ? <li>4</li>
? ? ? <li>5</li>
? ? </ol>
? </div>
</body>
</html>
2017-01-19
for循環(huán)里面是封號。
2016-09-14
for(j=0,j<list.length-1,j++) ?寫成逗號了
2016-09-02
我重寫了一段 ?居然正常了 ?完美運行 ? 可是和上面那段真心看不出哪不一樣。。。。。。
window.onload=function(){
? ? var wrap=document.getElementById('wrap'),
? ? ? ? pic=document.getElementById('pic').getElementsByTagName('li'),
? ? ? ? list=document.getElementById('list').getElementsByTagName('li'),
? ? ? ? index=0,
? ? ? ? timer=null;
? ? ? // 定義并調(diào)用自動播放函數(shù)
? ? ? if(timer){
? ? ? ? ? clearInterval(timer);
? ? ? }
? ? ? timer=setInterval(autoplay,2000)
? ? ??
? ? ? function autoplay(){
? ? ? ? ?index++;
? ? ? ? if(index>=list.length){
? ? ? ? ? ? ? index=0
? ? ? ?}
? ? ? ? change(index); ?
? ? ? }
? ? ? // 定義圖片切換函數(shù)
? ? ?
? ? ?// 鼠標劃過整個容器時停止自動播放
? ? ?wrap.onmouseover=function(){
? ? ? ? ?clearInterval(timer);
? ? ? ? ?timer=null;
? ? ?}
? ? ?// 鼠標離開整個容器時繼續(xù)播放至下一張
? ? ?wrap.onmouseout=function(){
? ? ? ? ?timer=setInterval(autoplay,2000);
? ? ?}
? ??
? ? ?// 遍歷所有數(shù)字導航實現(xiàn)劃過切換至對應(yīng)的圖片
? ? ?for(i=0;i<list.length;i++){
? ? ? ? ?list[i].id=i;
? ? ? ? ?list[i].onmouseover=function(){
? ? ? ? ? ? ?change(this.id);
? ? ? ? ?}
? ? ?}
? ? ?function change(curIndex){
? ? ? ? ?for(j=0;j<list.length;j++){
? ? ? ? ? ? ? ? ?list[j].className="";
? ? ? ? ? ? ? ? ?pic[j].style.display="none";
? ? ? ? ? ? ?}
? ? ? ? ?list[curIndex].className="on";
? ? ? ? ?pic[curIndex].style.display="block";
? ? ? ? ?index=curIndex;
? ? ?}
? ?}