                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

為什么點擊下一張的時候第四張圖片不能回到第一張，點擊上一張沒有問題，，，，，

<!DOCTYPE html>

<html>

<head>

<title>焦點圖輪播</title>

margin: 0;

padding: 0;

}

text-decoration: none;

color: #fff;

}

#contenter{

width: 725px;

height: 400px;

border:3px solid #333;

overflow: hidden;

position: relative;

}

#btn{

width: 150px;

text-align: center;

position: absolute;

z-index: 2;

bottom: 20px;

left: 200px;

}

#btn a{

width: 20px;

height: 20px;

background-color: #fff;

border-radius: 50px;

border: 2px solid #000;

display: inline-block;

opacity: 0.6;

margin:0 5px;

}

#btn .on{

background-color: yellow;

}

#Jiao{

width: 725px;

position: absolute;

top: 175px;

z-index: 2;

display: none;

}

#contenter:hover #Jiao{

display: block;

}

.jiao{

width: 50px;

height: 50px;

text-align: center;

line-height: 50px;

background-color: #000;

display: inline-block;

opacity: 0.6;

}

.jiao:hover{

opacity: 1;

transition: 1s;

}

#prev{

margin-right: 620px;

}

#img{

width: 4410px;

height: 400px;

position: absolute;

z-index: 1;

}

#img img{

float: left;

}

</style>

// 當頁面加載完畢后才獲取元素

window.onload=function(){

var Contenter=document.getElementById("contenter");

var Img=document.getElementById("img");

var Btn=document.getElementById("btn").getElementsByTagName('a');

var Prev=document.getElementById("prev");

var Next=document.getElementById("next");

var index=1;

function lightbtn(){

for(i=0;i<Btn.length;i++){

if(Btn[i].className=="on"){

Btn[i].className="";

}

Btn[index-1].className="on";

}

function animate(offset){

var newleft=parseInt(Img.style.left)+offset;

Img.style.left=newleft+"px";

if (newleft>-730) {

Img.style.left=-2920+"px";

}

if (newleft<-2920) {

Img.style.left=-730+"px";

}

Next.onclick=function(){

if(index==5){

index=1;

index+=1;

}

else{

index+=1;

}

lightbtn();

animate(-730);

}

Prev.onclick=function(){

if(index==1){

index=5;

index-=1;

}

else{

index-=1;

}

lightbtn();

animate(730);

}

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

慕粉1469491289

2016-09-11

源自：焦點圖輪播特效 4-1

關注問題我要回答

1749

操作

收起

2 回答

qq_flashboy_0 回答被采納 +3 積分
2016-09-11

這是因為你獲取的var Btn=document.getElementById("btn").getElementsByTagName('a');個數為4個。index應該從1 到4。

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

收起回答

慕粉1469491289 提問者

謝謝

2016-09-11 回復有任何疑惑可以回復我~

慕粉1469491289 提問者

非常感謝個數為4.那index-1要為4不應該取到5嗎？

2016-09-11 回復有任何疑惑可以回復我~

qq_flashboy_0
2016-09-11

<!DOCTYPE html>

<html>

<head>

<title>焦點圖輪播</title>

margin: 0;

padding: 0;

}

text-decoration: none;

color: #fff;

}

#contenter{

width: 725px;

height: 400px;

border:3px solid #333;

overflow: hidden;

position: relative;

}

#btn{

width: 150px;

text-align: center;

position: absolute;

z-index: 2;

bottom: 20px;

left: 200px;

}

img{

width:725px;

height:400px;

}

#btn a{

width: 20px;

height: 20px;

background-color: #fff;

border-radius: 50px;

border: 2px solid #000;

display: inline-block;

opacity: 0.6;

margin:0 5px;

}

#btn .on{

background-color: yellow;

}

#Jiao{

width: 725px;

position: absolute;

top: 175px;

z-index: 2;

display: none;

}

#contenter:hover #Jiao{

display: block;

}

.jiao{

width: 50px;

height: 50px;

text-align: center;

line-height: 50px;

background-color: #000;

display: inline-block;

opacity: 0.6;

}

.jiao:hover{

opacity: 1;

transition: 1s;

}

#prev{

margin-right: 620px;

}

#img{

width: 4410px;

height: 400px;

position: absolute;

z-index: 1;

}

#img img{

float: left;

}

</style>

// 當頁面加載完畢后才獲取元素

window.onload=function(){

var Contenter=document.getElementById("contenter");

var Img=document.getElementById("img");

var Btn=document.getElementById("btn").getElementsByTagName('a');

var Prev=document.getElementById("prev");

var Next=document.getElementById("next");

var index=1;

function lightbtn(){

for(i=0;i<Btn.length;i++){

if(Btn[i].className=="on"){

Btn[i].className="";

}

Btn[index-1].className="on";

}

function animate(offset){

var newleft=parseInt(Img.style.left)+offset;

Img.style.left=newleft+"px";

if (newleft>-730) {

Img.style.left=-2920+"px";

}

if (newleft<-2920) {

Img.style.left=-730+"px";

}

Next.onclick=function(){

if(index==4){

index=1;

?// index+=1;

}

else{

index+=1;

}

lightbtn();

animate(-730);

}

Prev.onclick=function(){

if(index==1){

index=4;

// index-=1;

}

else{

index-=1;

}

lightbtn();

animate(730);

}

</script>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</div>

</div>

</body>

</html>

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

收起回答

舉報

0/150

提交

取消

焦點圖輪播特效

參與學習 65331 人
解答問題 638 個

通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程

進入課程

本課相似問答

7 回答圖片顯示位置不正確，點擊按鈕的次數了也許第一張會變成第四張，第三張會變成最后一張，反正不對頭了，為什么？

3 回答點擊NEXT了為什么圖片沒有進入下一張呢？

4 回答顯示四張圖片而不是一張

2 回答container.onmouseout = play（）;stop后面加個（）會跳2張圖，就是會從第一張圖跳到第三張圖，第三張圖跳到第五張圖

2 回答原點切換圖片有bug，第一張到最后一張中間有一瞬間的閃白

搜索更多本課相關問答

為什么點擊下一張的時候第四張圖片不能回到第一張，點擊上一張沒有問題，，，，，

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么點擊下一張的時候第四張圖片不能回到第一張，點擊上一張沒有問題，，，，，

2 回答

本課相似問答

為什么點擊下一張的時候第四張圖片不能回到第一張，點擊上一張沒有問題，，，，，

為什么點擊下一張的時候第四張圖片不能回到第一張，點擊上一張沒有問題，，，，，

為什么點擊下一張的時候第四張圖片不能回到第一張，點擊上一張沒有問題，，，，，