课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

图片显示位置不正确，点击按钮的次数了也许第一张会变成第四张，第三张会变成最后一张，反正不对头了，为什么？

来源：5-1 按钮切换

qq_白菜_6

2015-12-18 09:43

for(var i = 0; i < buttons.length; i++){
   buttons[i].onclick=function (){
       var myIndex=parseInt(this.getAttribute("index"));
       var offset = -450 * (myIndex - index);
       animate(offset);
       index = myIndex;
       showButton();//选中样式随选中按钮变换
   }

写回答 关注

7回答

  • qq_白菜_6
    2015-12-18 14:19:39

       这是刚开始默认的第一张  http://img.mukewang.com/5673a51a0001933305350558.jpg

    经过一轮之后第一张变了http://img.mukewang.com/5673a5520001d42006330563.jpg

    原本的第一张变成了第二张了http://img.mukewang.com/5673a5770001bcf905530535.jpg

    0 0
  • 李晓健
    2015-12-18 14:10:42
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
 *{margin: 0;padding: 0;text-decoration: none;}
        #container{
            width: 450px;
 height: 500px;
 border: 3px solid #333333;
 overflow: hidden;
 position: relative;
 margin: 0 auto;
 }
        #list{
            width: 3150px;
 height:500px;
 position: absolute;
 z-index: 1;
 }
        #list img{
            float: left;
 width: 450px;
 height: 500px;
 }
        #buttons{
            position: absolute;
 height: 10px;
 width: 100px;
 z-index: 2;
 bottom: 20px;
 left: 200px;
 }
        #buttons span{
            cursor: pointer;
 float: left;
 border: 1px solid #FFFFFF;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background-color: #333;
 margin-right: 5px;
 }
        #buttons .on{
            background: orangered;
 }
        .arrow{
            cursor: pointer;
 display: none;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 width: 40px;
 height: 40px;
 position: absolute;
 z-index: 2;
 top: 180px;
 background: rgba(255,255,255,.3);
 }
        .arrow:hover{
            background: RGBA(0,0,0,.7);
 }
        #container:hover .arrow{
            display: block;
 }
        #prev{left: 20px;}
        #next{right: 20px;}
    </style>
</head>
<body>
<div id="container">
    <div id="list" style="left: 0;">
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img.mukewang.com/565eb68b00014e8e07400740-100-100.jpg" alt=""/>
        <img src="http://img.mukewang.com/564de97d0001b89e02790279-100-100.jpg" alt=""/>
        <img src="http://img.mukewang.com/545863aa00014aa802200220-100-100.jpg" alt=""/>
        <img src="http://img.mukewang.com/556c2e4200019d6d01000100-100-100.jpg" alt=""/>
        <img src="http://img.mukewang.com/554d7e1d000108fa01000100-100-100.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-40.jpg" alt=""/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" class="arrow" id="prev">&lt;</a>
    <a href="javascript:;" class="arrow" id="next">&gt;</a>
 <!--让点击效果执行javascript空语句，防止a标签跳转。-->
</div>
<script>
 window.onload = function(){
 var container=document.getElementById("container");
 var list = document.getElementById("list");
 var buttons=document.getElementById("buttons").getElementsByTagName("span");
 var prev = document.getElementById("prev");
 var next = document.getElementById("next");
 var index=1;
 var animated = false;//变量animated 控制图片正在轮换时点击切换失效，反之切换
 function showButton(){
 for(var i=0;i<buttons.length;i++){
 if(buttons[i].className == "on"){
 buttons[i].className = "";
 break;
                }
            }
 buttons[index - 1].className="on";
        }
 function animate(offset){
 animated = true;
 var newLeft =  parseInt(list.style.left) + offset ;
 var time=500; //轮播更换图片用的总时间
 var interval = 10;//每次位移间隔时间
 var speed = offset/(time/interval); //每次位移的量
 function go(){
 if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
 list.style.left = parseInt(list.style.left) + speed + "px";
 setTimeout(go,interval);
                }else{
 animated = false;
 list.style.left = newLeft +"px";
 if(newLeft > -450){
 list.style.left = -2250 + "px";
                    }else if(newLeft < -2250){
 list.style.left = 0; //这里应该恢复到原始位置，不是到第二张的位置
 }
                }
            }
 go();
        };
 next.onclick = function(){
 if(index == 5){
 index = 1;
            }else{
 index += 1;
            }
 showButton();
 if (!animated ){
 animate(-450);
            }
        };
 prev.onclick = function(){
 if(index == 1){
 index = 5;
            }else{
 index -= 1;
            }
 showButton();
 if (!animated ) {
 animate(450);
            }
        };
 for(var i = 0; i < buttons.length; i++){
 buttons[i].onclick=function (){
 if (this.className == "on"){
 return;
                }//按钮选中当前图片返回当前，不做任何计算
 var myIndex=parseInt(this.getAttribute("index"));//计算点击按钮位置
 var offset = -450 * (myIndex - index);//计算上一个按钮与当前点击按钮相差的图片距离
 animate(offset);
 showButton();//选中样式随选中按钮变换
 if (!animated ) {
 index = myIndex;//设置当前点击的按钮为当前的值
 }
            }
        }
    }
</script>
</body>
</html>

    没有问题呀，你第一张图和最后一张要是一样的。

    0 0
  • 李晓健
    2015-12-18 12:28:40
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
 *{margin: 0;padding: 0;text-decoration: none;}
        #container{
            width: 450px;
 height: 500px;
 border: 3px solid #333333;
 overflow: hidden;
 position: relative;
 margin: 0 auto;
 }
        #list{
            width: 3150px;
 height:500px;
 position: absolute;
 z-index: 1;
 }
        #list img{
            float: left;
 width: 450px;
 height: 500px;
 }
        #buttons{
            position: absolute;
 height: 10px;
 width: 100px;
 z-index: 2;
 bottom: 20px;
 left: 200px;
 }
        #buttons span{
            cursor: pointer;
 float: left;
 border: 1px solid #FFFFFF;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background-color: #333;
 margin-right: 5px;
 }
        #buttons .on{
            background: orangered;
 }
        .arrow{
            cursor: pointer;
 display: none;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 width: 40px;
 height: 40px;
 position: absolute;
 z-index: 2;
 top: 180px;
 background: rgba(255,255,255,.3);
 }
        .arrow:hover{
            background: RGBA(0,0,0,.7);
 }
        #container:hover .arrow{
            display: block;
 }
        #prev{left: 20px;}
        #next{right: 20px;}
    </style>
</head>
<body>
<div id="container">
    <div id="list" style="left: 0;">
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-41.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-42.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-43.jpg" alt=""/>
        <img src="http://img.mukewang.com/user/545865ce00010db102200220-40-40.jpg" alt=""/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" class="arrow" id="prev">&lt;</a>
    <a href="javascript:;" class="arrow" id="next">&gt;</a>
 <!--让点击效果执行javascript空语句，防止a标签跳转。-->
</div>
<script>
 window.onload = function(){
 var container=document.getElementById("container");
 var list = document.getElementById("list");
 var buttons=document.getElementById("buttons").getElementsByTagName("span");
 var prev = document.getElementById("prev");
 var next = document.getElementById("next");
 var index=1;
 var animated = false;//变量animated 控制图片正在轮换时点击切换失效，反之切换
 function showButton(){
 for(var i=0;i<buttons.length;i++){
 if(buttons[i].className == "on"){
 buttons[i].className = "";
 break;
                }
            }
 buttons[index - 1].className="on";
        }
 function animate(offset){
 animated = true;
 var newLeft =  parseInt(list.style.left) + offset ;
 var time=500; //轮播更换图片用的总时间
 var interval = 10;//每次位移间隔时间
 var speed = offset/(time/interval); //每次位移的量
 function go(){
 if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
 list.style.left = parseInt(list.style.left) + speed + "px";
 setTimeout(go,interval);
                }else{
 animated = false;
 list.style.left = newLeft +"px";
 if(newLeft > -450){
 list.style.left = -2250 + "px";
                    }else if(newLeft < -2250){
 list.style.left = 0; //这里应该恢复到原始位置，不是到第二张的位置
                    }
                }
            }
 go();
        };
 next.onclick = function(){
 if(index == 5){
 index = 1;
            }else{
 index += 1;
            }
 showButton();
 if (!animated ){
 animate(-450);
            }
        };
 prev.onclick = function(){
 if(index == 1){
 index = 5;
            }else{
 index -= 1;
            }
 showButton();
 if (!animated ) {
 animate(450);
            }
        };
 for(var i = 0; i < buttons.length; i++){
 buttons[i].onclick=function (){
 if (this.className == "on"){
 return;
                }//按钮选中当前图片返回当前，不做任何计算
 var myIndex=parseInt(this.getAttribute("index"));//计算点击按钮位置
 var offset = -450 * (myIndex - index);//计算上一个按钮与当前点击按钮相差的图片距离
 animate(offset);
 showButton();//选中样式随选中按钮变换
 if (!animated ) {
 index = myIndex;//设置当前点击的按钮为当前的值
 }
            }
        }
    }
</script>
</body>
</html>

    list.style.left = 0; //这里应该恢复到原始位置，不是到第二张的位置

    1 0

    qq_白菜_...

    老师，还是出现那种情况了不信不换几个图片试试，有没有原件发给我 我自己看看好了

    2015-12-18 14:01:53

    共 1 条回复 >

  • qq_白菜_6
    2015-12-18 10:48:18

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" href="css/rotate.css" type="text/css" />
    </head>
    <script type="text/javascript" src="js/rotate.js"></script>
    <body>
       <div id="container">
           <div id="list" style="left: 0;">
               <img src="imgs/ml5.jpg" alt=""/>
               <img src="imgs/ml1.jpg" alt=""/>
               <img src="imgs/ml2.jpg" alt=""/>
               <img src="imgs/ml3.jpg" alt=""/>
               <img src="imgs/ml4.jpg" alt=""/>
               <img src="imgs/ml5.jpg" alt=""/>
               <img src="imgs/ml1.jpg" alt=""/>
           </div>
           <div id="buttons">
               <span index="1" class="on"></span>
               <span index="2"></span>
               <span index="3"></span>
               <span index="4"></span>
               <span index="5"></span>
           </div>
           <a href="javascript:;" class="arrow" id="prev">&lt;</a>
           <a href="javascript:;" class="arrow" id="next">&gt;</a>
           <!--让点击效果执行javascript空语句，防止a标签跳转。-->
    </div>
    </body>
    </html>

    这是HTML文件

    0 0
  • qq_白菜_6
    2015-12-18 10:47:41

    @charset "UTF-8";
    *{margin: 0;padding: 0;text-decoration: none;}
    #container{
       width: 450px;
       height: 500px;
       border: 3px solid #333333;
       overflow: hidden;
       position: relative;
       margin: 0 auto;
    }
    #list{
       width: 3150px;
       height:500px;
       position: absolute;
       z-index: 1;
    }
    #list img{
       float: left;
       width: 450px;
       height: 500px;
    }
    #buttons{
       position: absolute;
       height: 10px;
       width: 100px;
       z-index: 2;
       bottom: 20px;
       left: 200px;
    }
    #buttons span{
       cursor: pointer;
       float: left;
       border: 1px solid #FFFFFF;
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background-color: #333;
       margin-right: 5px;
    }
    #buttons .on{
       background: orangered;
    }
    .arrow{
       cursor: pointer;
       display: none;
       line-height: 39px;
       text-align: center;
       font-size: 36px;
       font-weight: bold;
       width: 40px;
       height: 40px;
       position: absolute;
       z-index: 2;
       top: 180px;
       background: rgba(255,255,255,.3);
    }
    .arrow:hover{
       background: RGBA(0,0,0,.7);
    }
    #container:hover .arrow{
       display: block;
    }
    #prev{left: 20px;}
    #next{right: 20px;}



    这是css文件


    0 0
  • qq_白菜_6
    2015-12-18 10:35:24

    window.onload = function(){
       var container=document.getElementById("container");
       var list = document.getElementById("list");
       var buttons=document.getElementById("buttons").getElementsByTagName("span");
       var prev = document.getElementById("prev");
       var next = document.getElementById("next");
       var index=1;
       var animated = false;//变量animated 控制图片正在轮换时点击切换失效，反之切换
       function showButton(){
           for(var i=0;i<buttons.length;i++){
               if(buttons[i].className == "on"){
                   buttons[i].className = "";
                   break;
               }
           }
           buttons[index - 1].className="on";
       }
       function animate(offset){
           animated = true;
           var newLeft =  parseInt(list.style.left) + offset ;
           var time=500; //轮播更换图片用的总时间
           var interval = 10;//每次位移间隔时间
           var speed = offset/(time/interval); //每次位移的量
           function go(){
               if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
                   list.style.left = parseInt(list.style.left) + speed + "px";
                   setTimeout(go,interval);
               }else{
                   animated = false;
                   list.style.left = newLeft +"px";
                   if(newLeft > -450){
                       list.style.left = -2250 + "px";
                   }else if(newLeft < -2250){
                       list.style.left = -450 + "px";
                   }
               }
           }
           go();
       };
       next.onclick = function(){
           if(index == 5){
               index = 1;
           }else{
               index += 1;
           }
           showButton();
           if (!animated ){
               animate(-450);
           }
       };
       prev.onclick = function(){
           if(index == 1){
               index = 5;
           }else{
               index -= 1;
           }
           showButton();
           if (!animated ) {
               animate(450);
           }
       };
       for(var i = 0; i < buttons.length; i++){
           buttons[i].onclick=function (){
               if (this.className == "on"){
                   return;
               }//按钮选中当前图片返回当前，不做任何计算
               var myIndex=parseInt(this.getAttribute("index"));//计算点击按钮位置
               var offset = -450 * (myIndex - index);//计算上一个按钮与当前点击按钮相差的图片距离
               animate(offset);
               showButton();//选中样式随选中按钮变换
               if (!animated ) {
                   index = myIndex;//设置当前点击的按钮为当前的值
               }
           }
       }
    }

    我用的外联

    1 0

    李晓健

    html css 呢

    2015-12-18 10:38:53

    共 1 条回复 >

  • 李晓健
    2015-12-18 09:45:32

    你可以给一下完整的代码看一下

    1 0

    qq_白菜_...

    老师 看好了吗？

    2015-12-18 11:20:01

    共 1 条回复 >

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65348 学习 · 638 问题

查看课程

相似问题

为什么点击下一张的时候第四张图片不能回到第一张，点击上一张没有问题，，，，，

回答 2

container.onmouseout = play（）;stop后面加个（）会跳2张图，就是会从第一张图跳到第三张图，第三张图跳到第五张图

回答 2

显示四张图片而不是一张

回答 4

前后分别加载了最后一张图片和第一张图片

回答 1

最后一张到第一张中间出现空白

回答 1

打开慕课网App查看更多内容