                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點(diǎn)圖輪播特效

圖片顯示位置不正確，點(diǎn)擊按鈕的次數(shù)了也許第一張會(huì)變成第四張，第三張會(huì)變成最后一張，反正不對(duì)頭了，為什么？

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

源自：焦點(diǎn)圖輪播特效 5-1

關(guān)注問題我要回答

1699

操作

收起

7 回答

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

? ?這是剛開始默認(rèn)的第一張 ?

經(jīng)過一輪之后第一張變了

原本的第一張變成了第二張了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

李曉健
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>
?<!--讓點(diǎn)擊效果執(zhí)行javascript空語句，防止a標(biāo)簽跳轉(zhuǎn)。-->
</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?控制圖片正在輪換時(shí)點(diǎn)擊切換失效，反之切換
?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;?//輪播更換圖片用的總時(shí)間
?var?interval?=?10;//每次位移間隔時(shí)間
?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;?//這里應(yīng)該恢復(fù)到原始位置，不是到第二張的位置
?}
????????????????}
????????????}
?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;
????????????????}//按鈕選中當(dāng)前圖片返回當(dāng)前，不做任何計(jì)算
?var?myIndex=parseInt(this.getAttribute("index"));//計(jì)算點(diǎn)擊按鈕位置
?var?offset?=?-450?*?(myIndex?-?index);//計(jì)算上一個(gè)按鈕與當(dāng)前點(diǎn)擊按鈕相差的圖片距離
?animate(offset);
?showButton();//選中樣式隨選中按鈕變換
?if?(!animated?)?{
?index?=?myIndex;//設(shè)置當(dāng)前點(diǎn)擊的按鈕為當(dāng)前的值
?}
????????????}
????????}
????}
</script>
</body>
</html>

沒有問題呀，你第一張圖和最后一張要是一樣的。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

李曉健
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>
?<!--讓點(diǎn)擊效果執(zhí)行javascript空語句，防止a標(biāo)簽跳轉(zhuǎn)。-->
</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?控制圖片正在輪換時(shí)點(diǎn)擊切換失效，反之切換
?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;?//輪播更換圖片用的總時(shí)間
?var?interval?=?10;//每次位移間隔時(shí)間
?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;?//這里應(yīng)該恢復(fù)到原始位置，不是到第二張的位置
????????????????????}
????????????????}
????????????}
?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;
????????????????}//按鈕選中當(dāng)前圖片返回當(dāng)前，不做任何計(jì)算
?var?myIndex=parseInt(this.getAttribute("index"));//計(jì)算點(diǎn)擊按鈕位置
?var?offset?=?-450?*?(myIndex?-?index);//計(jì)算上一個(gè)按鈕與當(dāng)前點(diǎn)擊按鈕相差的圖片距離
?animate(offset);
?showButton();//選中樣式隨選中按鈕變換
?if?(!animated?)?{
?index?=?myIndex;//設(shè)置當(dāng)前點(diǎn)擊的按鈕為當(dāng)前的值
?}
????????????}
????????}
????}
</script>
</body>
</html>

list.style.left = 0; //這里應(yīng)該恢復(fù)到原始位置，不是到第二張的位置

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

qq_白菜_6 提問者

老師，還是出現(xiàn)那種情況了不信不換幾個(gè)圖片試試，有沒有原件發(fā)給我我自己看看好了

2015-12-18 回復(fù) 有任何疑惑可以回復(fù)我~

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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

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