自写焦点图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html练习2</title>
<style type="text/css">
#carousel{
height:120px;
width:786px;
position:relative;
border:1px solid #000;
margin: auto;
}
#imgs{
height:120px;
width:4716px;
position:absolute;
left:-786px;
}
#imgs img{
float:left;
}
body{
padding:0;
margin:0;
}
#buttons{
position:absolute;
font-size:10px;
text-align:center;
color:#fff;
top:90px;
left:670px;
}
#buttons span{
cursor: pointer;
float: left;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin-right: 5px;
}
#buttons .on{
background: orangered;
}
#buttons .out{
background:#644d13;;
}
</style>
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementById("imgs");
var carousel=document.getElementById("carousel");
var button=document.getElementsByTagName("span");
var timer;
function move(width){
clearInterval(time);
var distance=Math.abs(width);
var overdis=0;
var time=null;
time=setInterval(function(){
var speed=(distance/6);
var offSL=imgs.offsetLeft;
if(width>0){
if(offSL==0||offSL>0){
imgs.style.left=-3144+"px";
imgs.style.left=imgs.offsetLeft+speed+"px";
}
else{
imgs.style.left=offSL+speed+"px";
}
}
else{
imgs.style.left=offSL-speed+"px";
if(offSL==-3930||offSL<-3930){
imgs.style.left=-786+"px";
imgs.style.left=imgs.offsetLeft-speed+"px";
}
else{
imgs.style.left=offSL-speed+"px";
}
}
overdis=overdis+speed;
if(overdis==distance){
clearInterval(time);
showbutton();
}
},60);
}
function showbutton(){
var offSL=imgs.offsetLeft;
var num=Math.abs(offSL/786);
if(num==5){
num=1;
}
for(i=1;i<button.length+1;i++){
if(i==num){
button[i-1].className="on";
}
else{
button[i-1].className="out";
}
}
}
function stop(){
clearTimeout(timer);
}
function play(){
timer=setInterval(function(){move(-786)},2000);
}
for(i=0;i<button.length;i++){
button[i].onclick=function(){
var myindex=this.getAttribute("index");
var offSL=imgs.offsetLeft;
var num=Math.abs(offSL/786);
var itarg;
itarg=-786*(myindex-num);
move(itarg);
}
}
carousel.onmouseover=function(){
stop();
}
carousel.onmouseout=function(){
play();
}
play();
}
//------------------------------轮播------------------------------------------------------
</script>
</head>
<body>
<div id="carousel">
<div id="imgs">
<a href="#"><img src="imgs/F网站地图/mapuser_xyz.png" /></a>
<a href="#"><img src="imgs/F网站地图/74892799.jpg" /></a>
<a href="#"><img src="imgs/F网站地图/aiodown.jpg" /></a>
<a href="#"><img src="imgs/F网站地图/mapTime.jpg" /></a>
<a href="#"><img src="imgs/F网站地图/mapuser_xyz.png" /></a>
<a href="#"><img src="imgs/F网站地图/74892799.jpg" /></a>
</div>
<div id="buttons">
<span index="1" class="on">1</span>
<span index="2" class="out">2</span>
<span index="3" class="out">3</span>
<span index="4" class="out">4</span>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号