<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0;padding:0;text-decoration:none;}
body{padding:20px}
#container{width:600px;height:400px;border:3px solid #333;overflow:hidden;position:relative;margin:0 auto;}
#list{width:4200px;height:400px;position:absolute;z-index:1;}
#list img{float:left;}
#buttons{position:absolute;width:100px;height:10px;bottom:20px;left:250px;z-index:2;}
#buttons span{cursor:pointer;display:block;float:left;width:10px;height:10px;border:1px solid #FFF;border-radius:50%;background:#333;margin-right:5px;}
#buttons .on { background: orange;}
.arrow{position:absolute;display:none;width:40px;height:40px;line-height:40px;z-index:2;font-size:36px;text-align:center;font-weight:bold;top:180px;background-color:rgba(0,0,0,.3);color:#FFF;}
#prev{left:20px;}
#next{right:20px;}
#container:hover .arrow{display:block;}
.arrow:hover{background-color:rgba(0,0,0,.7);}
</style>
<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 timer;
var animated=false;
function showBtn(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
}
}
buttons[index-1].className='on';
}
function animate(offset){
animated=true;
var newL=parseInt(list.style.left)+offset;
var time=600;
var interval=10;
var speed=offset/(time/interval);
function go(){
if((speed<0 && parseInt(list.style.left)>newL) || (speed>0 && parseInt(list.style.left)<newL)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}else{
animated=false;
list.style.left=newL+'px';
if(newL>-600){
list.style.left=-3000+'px';
}else if(newL<-3000){
list.style.left=-600+'px';
}
}
}
go();
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
next.onclick=function(){
if(index==5){
index=1;
}else{
index+=1;
}
if(!animated){
animate(-600);
}
showBtn();
}
prev.onclick=function(){
if(index==1){
index=5;
}else{
index-=1;
}
if(!animated){
animate(600);
}
showBtn();
}
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
var myindex=parseInt(this.getAttribute('index'));
var offset=-600*(myindex-index);
if(!animated){
animate(offset);
}
index=myindex;
showBtn();
}
}
container.onmouseover=stop();
container.onmouseout=play();
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px">
<img src="img/5.jpg" alt="" title="">
<img src="img/1.jpg" alt="" title="">
<img src="img/2.jpg" alt="" title="">
<img src="img/3.jpg" alt="" title="">
<img src="img/4.jpg" alt="" title="">
<img src="img/5.jpg" alt="" title="">
<img src="img/1.jpg" alt="" title="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2" class=""></span>
<span index="3" class=""></span>
<span index="4" class=""></span>
<span index="5" class=""></span>
</div>
<a href="#" id="prev" class="arrow"><</a>
<a href="#" id="next" class="arrow">></a>
</div>
</body>
</html>
1 回答
已采纳
心有猛虎_细嗅蔷薇
TA贡献119条经验 获得超250个赞
自动轮播时图片切换一下张：
next.onclick=function(){
if(index==5){
index=1;
}else{
index+=1;
}
if(animated){
return;
}
showBtn();
animate(-600);
}鼠标悬停暂停播放：
container.onmouseover=stop; container.onmouseout=play;
1.出现切换两张的问题是因为在自动播放时animated被单独地进行设置.
2.之所以计时器取消不掉是因为涉及到了回调函数，事件触发时才会调用stop方法，要写成方法名stop。
添加回答
举报
0/150
提交
取消