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

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

来源：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

这是刚开始默认的第一张
经过一轮之后第一张变了
原本的第一张变成了第二张了

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"><</a>
<a href="javascript:;" class="arrow" id="next">></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 条回复 >

焦点图轮播特效

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

65279 学习 · 611 问题

查看课程

相似问题

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

回答 2

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

回答 2

回答 1

回答 4

回答 1