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

找了好久也不知道哪里錯(cuò)了，滾動(dòng)也實(shí)行不了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

? *{ margin: 0; padding: 0; text-decoration: none;}

? ? ? ? body { padding: 20px;}

? ? ? ? #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}

? ? ? ? #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}

? ? ? ? #list img { float: left;}

? ? ? ? #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}

? ? ? ? #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #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-color: RGBA(0,0,0,.3); color: #fff;}

? ? ? ? .arrow:hover { background-color: RGBA(0,0,0,.7);}

? ? ? ? #container:hover .arrow { display: block;}

? ? ? ? #prev { left: 20px;}

? ? ? ? #next { right: 20px;}

</style>

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

?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){

var newLeft=parseInt(list.style.left)+offset;

list.style.left=newLeft+'px';

if(newLeft>-600){list.style.left=-3000+'px';

}

if(newLeft<-3000){list.style.left=-600+'px';}

}

next.onclick = function () { if (index == 5) {

? ? ? ? ? ? ? ? ? ? index = 1;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? ? index += 1;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? animate(-600);

? ? ? ? ? ? ? ? showButton();

? ? ? ? ? ? }

prev.onclick = function () {

?

? if (index == 1) {

? ? ? ? ? ? ? ? ? ? index = 5;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? ? index -= 1;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? animate(600);

? ? ? ? ? ? ? ? showButton();

? ? ? ? ? ? }

</script>

? ??

</head>

<body>

? ? <div id="list" style="left: -600px;">

? ? ? ? <img src="images/0.jpg" alt="1"/>

? ? ? ? <img src="images/4354_27d6d4fb6-61be-4a56-b046-8c4c90c707d7.png" alt="1"/>

? ? ? ?<img src="images/294422825739568090_.jpg" ?alt="2"/>

? ? ? ?<img src="images/mzl.tsrvdtee.175x175-75.png" alt="3"/>

? ? ? ? <img src="images/u=493782737,3064530006&fm=21&gp=0.jpg" alt="4"/>

? ? ? ? <img src="images/u=1602452522,2035743143&fm=21&gp=0.jpg" ?alt="5"/>

? ? ? ?<img src="images/c1bca6a39e4f2637-e6da0b2b85c0cc73-bf2de4416304fd7b757f118a18892782.jpg" alt="5"/>

? ? </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:;" id="prev" class="arrow"><</a>

? ? <a href="javascript:;" id="next" class="arrow">></a>

</div>

</body>

</html>

慕粉3462803

2016-07-29

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

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

990

操作

收起

2 回答

_This
2016-07-30

你還沒(méi)寫(xiě)完吧，這是我的所有代碼，你比對(duì)一下吧，希望能幫到你

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

收起回答

_This
2016-07-30

<!doctype?html>
<html>
<head>
<meta?charset="UTF-8">
<title></title>
<style?type="text/css">
*{margin:?0;padding:?0;text-decoration:?none;}
#container{width:?960px;height:?350px;overflow:?hidden;position:?relative;}
#list{width:?6720px;height:?350px;position:?absolute;z-index:?10;}
#list?img{
float:?left;
}
#buttons{position:?absolute;height:?10px;width:?100px;z-index:?20;bottom:?20px;?left:400px;}
#buttons?span{cursor:?pointer;float:?left;border:?1px?solid?#fff;width:?10px;height:?10px;border-radius:?50%;?background:?#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:?40;?top:?150px;?background-color:?RGBA(0,0,0,.3);?color:?#fff;}
????????.arrow:hover?{?background-color:?RGBA(0,0,0,.7);}
????????#container:hover?.arrow?{?display:?block;}
????????#prev?{?left:?20px;}
????????#next?{?right:?20px;}
</style>
<script?type="text/javascript">
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;
var?timer;

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?arrows(num){
animated=true;
var?newLeft=parseInt(list.style.left)+num;
//?list.style.left=-960px,它本身是個(gè)數(shù)組，所以要用parseInt()轉(zhuǎn)換成數(shù)字
var?time=3000;//位移總時(shí)間
var?interval=10;//位移間隔時(shí)間；
var?speed=num/(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>-960)?{
list.style.left=-4800+'px';
}
if?(newLeft<-4800)?{
list.style.left=-960+'px';
}
};
}
go();
//alert(parseInt(list.style.left))
}

next.onclick=function(){
if?(!animated)?{
if?(index==5)?{
index=1
}?else{
index+=1;
};
showButton()
arrows(-960);
};

}
prev.onclick=function(){
if?(!animated)?{
if?(index==1)?{
index=5
}?else{
index-=1;
};

arrows(-960);

showButton()};
}
function?play(){
timer=setInterval(function(){
next.onclick();
},3000)
}
function?stop(){
clearInterval(timer);
}
for?(var?i?=?0;?i?<?buttons.length;?i++)?{
buttons[i].onclick=function(){
//?如果當(dāng)前的樣式為"on"則不執(zhí)行下面的程序
if?(this.className=='on')?{
return;
};
//?getAttribute()方法返回指定屬性名的屬性值
var?myIndex=parseInt(this.getAttribute('index'));
//alert(myIndex);
var?num=-960*(myIndex-index);
//?alert(index);
//?alert(myIndex-index);
//?arrows函數(shù)把num加上當(dāng)前的left值
if?(animated==false)?{
arrows(num);
};
index=myIndex;
showButton();
}
}
container.onmouseover=stop;
container.onmouseout=play;
}
</script>
</head>
<body>
<div?id="container">
<div?id="list"?style="left:-960px;">
<img?src="images/5.png"?alt="">
<img?src="images/1.png"?alt="">
<img?src="images/2.png"?alt="">
<img?src="images/3.png"?alt="">
<img?src="images/4.png"?alt="">
<img?src="images/5.png"?alt="">
<img?src="images/1.png"?alt="">
</div>
<div?id="buttons">
<span?index="1"></span>
<span?index="2"></span>
<span?index="3"></span>
<span?index="4"></span>
<span?index="5"></span>
</div>
<a?href="javascript:;"?id="prev">&lt;</a>
<a?href="javascript:;"?id="next">&gt;</a>
</div>
</body>
</html>