焦点图（图片左右预览）

来源：互联网发布：阿里云小号编辑：程序博客网时间：2024/06/05 09:52

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#scroll{ width:140px; height:210px; overflow:hidden;border:1px solid red;}
#scroll ul{ width:700px; height:210px; padding:0; margin:0; list-style:none;}
#scroll ul li{ width:138px; height:208px; float:left; border:1px solid yellow;}
#scroll ul li img{width:138px; height:208px;}

.container{ padding:0 60px; width:140px; position:relative;}
#left,#right{ width:50px; height:50px; position:absolute; top:80px; border:1px solid blue; cursor:pointer;}
#left{left:0px;}
#right{right:0px;}
</style>
</HEAD>

<BODY>
<
<div class="container">
<div id="left"></div>
<div id="scroll">
<ul>
<li><img src="0.jpg" alt="0.jpg"></li>
<li><img src="1.jpg" alt="1.jpg"></li>
<li><img src="2.jpg" alt="2.jpg"></li>
<li><img src="3.jpg" alt="3.jpg"></li>
<li><img src="4.jpg" alt="4.jpg"></li>
</ul>
</div>
<div id="right"></div>
</div>
<script type="text/javascript">
var endscroll,T;
function scrol(direction,endscroll,step){
var obj1=document.getElementById("scroll");
if(direction=="right"){
if(obj1.scrollLeft<endscroll){ obj1.scrollLeft+=step; }
}
if(direction=="left"){
if(obj1.scrollLeft>endscroll){ obj1.scrollLeft-=step; }
}
}
function _scrol1(){ return scrol("right",endscroll,10);}
function _scrol2(){ return scrol("left",endscroll,10);}
document.getElementById("right").onclick=function(){
clearInterval(T);
endscroll=document.getElementById("scroll").scrollLeft+140;
T=setInterval("_scrol1()",1);
}
document.getElementById("left").onclick=function(){
clearInterval(T);
endscroll=document.getElementById("scroll").scrollLeft-140;
T=setInterval("_scrol2()",1);
}
</script>
</BODY>
</HTML>