<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
*{margin:0;padding:0;text-decoration: none;}
body{padding:20px;}
.container{width:600px;height:400px;border: 1px solid #333;position:relative;overflow: hidden;}
.list{width:4200px;height:400px;position:absolute;z-index: 1;}
.list img{float:left;}
.buttons{position:absolute;height:10px;width:100px;bottom:20px;left:250px;z-index:2;}
.buttons span{cursor:pointer;float:left;border:1px solid #fff;width:10px;height:10px;margin-right:5px; background:#333;border-radius:50%;}
.buttons .on{background:orangered;}
.arrow{cursor:pointer;z-index:2;position:absolute;top:180px;width:40px;height:40px; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; background-color:RGBA(0,0,0,.3); color:#fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#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 timer=null;
var animated=false;
function showBotton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
next.onclick=function(){
if(index==5){
index=1;
}
else{
index += 1;
}
showBotton();
if(!animated)
{animate(-600);}
}
prev.onclick=function(){
if(index==1){
index=5;
}
else{
index -= 1;
}
showBotton();
if(!animated)
{animate(600);}
}
function animate(offset){
animated=true;
var newLeft=parseInt(list.style.left)+offset;
var time=300;
var inteval=10;
var speed=offset/(time/inteval);
var go = function (){
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, inteval);
}
else{
list.style.left=newLeft+'px';
if(newLeft > -600){list.style.left=-3000+'px';}
if(newLeft< -3000){list.style.left=-600+'px';}
}
animated=false;
}
go();
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000)
}
function stop(){
clearInterval(timer);
}
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
offset=-600*(myIndex-index);
animate(offset);
index=myIndex;
showBotton();
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
</script>
</head>
<body>
<div id="container" class="container">
<div id="list" class="list" style="left:-600px">
<img src="5.jpg" alt="1" />
<img src="1.jpg" alt="1" />
<img src="2.jpg" alt="2" />
<img src="3.jpg" alt="3" />
<img src="4.jpg" alt="4" />
<img src="5.jpg" alt="5" />
<img src="1.jpg" alt="5" />
</div>
<div id="buttons" class="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>
pictures-take-turns-to-play.rar_play
版权申诉
193 浏览量
2022-09-24
07:34:33
上传
评论
收藏 485KB RAR 举报
pictures-take-turns-to-play.rar （7个子文件） 
焦点图轮播特效 
jquery.1.10.2.js 380KB
2.jpg 58KB 1.jpg 71KB 3.jpg 101KB 5.jpg 67KB
焦点图轮播.html 5KB 4.jpg 120KB资源评论
