                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /焦点图轮播特效

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

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();//选中样式随选中按钮变换
}

qq_白菜_6

2015-12-18

源自：焦点图轮播特效 5-1

关注问题我要回答

1667

操作

收起

7 回答

qq_白菜_6 提问者
2015-12-18

这是刚开始默认的第一张

经过一轮之后第一张变了

原本的第一张变成了第二张了

0 回复有任何疑惑可以回复我~

收起回答

李晓健
2015-12-18

<!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://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//565eb68b00014e8e07400740-100-100.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//564de97d0001b89e02790279-100-100.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//545863aa00014aa802200220-100-100.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//556c2e4200019d6d01000100-100-100.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//554d7e1d000108fa01000100-100-100.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.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 回复有任何疑惑可以回复我~

收起回答

李晓健
2015-12-18

<!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://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-41.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-42.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-40.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.com//user/545865ce00010db102200220-40-43.jpg" alt=""/>
        <img src="http://img1.sycdn.imooc.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; //这里应该恢复到原始位置，不是到第二张的位置

0 回复有任何疑惑可以回复我~

收起回答

qq_白菜_6 提问者

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

2015-12-18 回复有任何疑惑可以回复我~

qq_白菜_6 提问者
2015-12-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"><</a>
<a href="javascript:;" class="arrow" id="next">></a>

</div>
</body>
</html>

这是HTML文件

0 回复有任何疑惑可以回复我~

收起回答

qq_白菜_6 提问者
2015-12-18

@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;}