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

為什么點(diǎn)擊下一張的時(shí)候第四張圖片不能回到第一張，點(diǎn)擊上一張沒(méi)有問(wèn)題，，，，，

<!DOCTYPE html>

<html>

<head>

*{

margin: 0;

padding: 0;

}

a{

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>

// 當(dāng)頁(yè)面加載完畢后才獲取元素

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

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

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

1741

操作

收起

2 回答

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

這是因?yàn)槟惬@取的var Btn=document.getElementById("btn").getElementsByTagName('a');個(gè)數(shù)為4個(gè)。index應(yīng)該從1 到4。

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

收起回答

#1

慕粉1469491289 提問(wèn)者

謝謝

2016-09-11 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕粉1469491289 提問(wèn)者

非常感謝個(gè)數(shù)為4.那index-1要為4不應(yīng)該取到5嗎？

2016-09-11 回復(fù) 有任何疑惑可以回復(fù)我~

qq_flashboy_0
2016-09-11

<!DOCTYPE html>

<html>

<head>

*{

margin: 0;

padding: 0;

}

a{

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>

// 當(dāng)頁(yè)面加載完畢后才獲取元素

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

收起回答

舉報(bào)

0/150

提交

取消

焦點(diǎn)圖輪播特效

參與學(xué)習(xí) 65327 人
解答問(wèn)題 634 個(gè)

通過(guò)本教程學(xué)習(xí)您將能掌握非常實(shí)用的焦點(diǎn)圖輪播特效的制作過(guò)程

進(jìn)入課程

本課相似問(wèn)答

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

3 回答點(diǎn)擊NEXT了為什么圖片沒(méi)有進(jìn)入下一張呢？

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

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

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

搜索更多本課相關(guān)問(wèn)答

為什么點(diǎn)擊下一張的時(shí)候第四張圖片不能回到第一張，點(diǎn)擊上一張沒(méi)有問(wèn)題，，，，，

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

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么點(diǎn)擊下一張的時(shí)候第四張圖片不能回到第一張，點(diǎn)擊上一張沒(méi)有問(wèn)題，，，，，

2 回答

本課相似問(wèn)答

為什么點(diǎn)擊下一張的時(shí)候第四張圖片不能回到第一張，點(diǎn)擊上一張沒(méi)有問(wèn)題，，，，，

為什么點(diǎn)擊下一張的時(shí)候第四張圖片不能回到第一張，點(diǎn)擊上一張沒(méi)有問(wèn)題，，，，，

為什么點(diǎn)擊下一張的時(shí)候第四張圖片不能回到第一張，點(diǎn)擊上一張沒(méi)有問(wèn)題，，，，，