JS图片左右切换效果的代码
js图片左右切换效果的代码
本文章提供一款js图片左右切换效果的代码超漂亮的切换效果，同时还支持手控制左右滚动哦，好了费话不说多了喜欢就下载吧，哈哈哈。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " http://www.zzzyk.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<style>
*{ margin:0; padding:0}
#lbcaption {
display:block;
font-size:12px;
font-weight:100;
}
#img_container{ text-align:left; position:relative; margin:0 auto;border:1px solid #000; overflow:hidden;width:120px; height:159px;}
#imgbox{position:absolute; width:2000px;left:0px;top:0}
#imgbox img{ float:left; border:0; margin:0; width:120px; height:159px; }
</style>
<div id="img_container">
<div id="imgbox" style="left:0"></div>
</div>
<div style="text-align:center"><a href="网页特效:void(0)" id="pre" >◄</a> <span
id="currentnum">1</span>/<span id="allnum"></span> <a id="next"
href="javascript:void(0)">►</a>
</div>
<script type="text/javascript">
$=function(obj){return document.getelementbyid(obj);}
//图片显示的宽度。对应样式中的宽度也要修改为一致。
var imgwidth=120;
//图片地址
var imgsrc= new array();
imgsrc[0]="/jscss教程/demoimg/wall_s1.jpg";
imgsrc[1]="/jscss/demoimg/wall_s2.jpg";
imgsrc[2]="/jscss/demoimg/wall_s3.jpg";
imgsrc[3]="/jscss/demoimg/wall_s4.jpg";
//点开后大图地址
var bigimgurl= new array();
bigimgurl[0]="/jscss/demoimg/wall1.jpg";
bigimgurl[1]="/jscss/demoimg/wall2.jpg";
bigimgurl[2]="/jscss/demoimg/wall3.jpg";
bigimgurl[3]="/jscss/demoimg/wall4.jpg";
//图片文字简介
var title= new array();
title[0]="风景美如画";
title[1]="最爱旅游";
title[2]="图片文字";
title[3]="图片文字介绍";
title[4]="您的内容";
var arraylen=imgsrc.length;
for (i=0; i<arraylen;i++){
var obox=$("imgbox");
var oimg=document.createelement("img");
oimg.setattribute("src",imgsrc[i]);
var oa=document.createelement("a");
oa.setattribute("href",bigimgurl[i]);
oa.setattribute("title",title[i]);
oa.setattribute("rel","lytebox[vacation]");
oa.appendchild(oimg);
obox.appendchild(oa);
}
$("allnum").innerhtml=imgsrc.length;
$("next").onclick=function(){
var oleft=parseint($("imgbox").style.left);
if(oleft<=-(imgsrc.length-1)*imgwidth){oleft=imgwidth};
$("imgbox").style.left= oleft-imgwidth + "px";
$("currentnum").innerhtml=-parseint($("imgbox").style.left)/imgwidth+1;
}
$("pre").onclick=function(){
var oleft=parseint($("imgbox").style.left);
if(oleft>=0){oleft=-(imgsrc.length)*imgwidth};
$("imgbox").style.left= oleft+imgwidth + "px";
$("currentnum").innerhtml=-parseint($("imgbox").style.left)/imgwidth+1;
}
</script>
图片左右滚动切换展示代码二
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css+js图片左右滚动切换展示</title>
<style>
body{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
font: 70% verdana, geneva, arial, helvetica, sans-serif;
color: #000;
padding-top: 0px;
text-align: center
}
#outer{
padding-right: 0px;
padding-left: 0px;
background: url(/images/bg-outer.gif) repeat-y center top;
padding-bottom: 0px;
margin: 0px auto;
width: 780px;
padding-top: 0px;
text-align: left
}
#wrapper{
background: #fff;
margin: 0px 4px
}
#content{
padding-right: 0px;
padding-left: 0px;
min-height: 400px;
padding-bottom: 20px;
margin: 20px 30px;
padding-top: 0px;
position: relative
}
#focus{
border-right: #ccc 2px solid;
padding-right: 0px;
border-top: #ccc 2px solid;
padding-left: 0px;
min-height: 188px;
background: url(/images/tile.gif) #eee repeat-y left top;
padding-bottom: 10px;
margin: 25px 0px 30px;
border-left: #ccc 2px solid;
width: 100%;
padding-top: 15px;
border-bottom: #ccc 2px solid;
position: relative;
height: 188px
}
#beni{
padding-right: 0px;
padding-left: 0px;
left: 0px;
padding-bottom: 0px;
margin: 0px;
width: 250px;
padding-top: 0px;
list-style-type: none;
position: absolute;
top: 15px
}
#beni li{
border-top: #fff 1px solid;
font-size: 12px;
float: left;
width: 250px;
text-indent: 24px;
line-height: 26px
}
#beni li.first{
border-top: 0px
}
#beni li a{
border-right: 0px;
padding-right: 0px;
border-top: 0px;
display: block;
padding-left: 0px;
font-weight: bold;
background: #eee;
padding-bottom: 0px;
margin: 0px;
border-left: 0px;
padding-top: 0px;
border-bottom: 0px;
text-decoration: none
}
#beni li a:hover{
background: #f9f9f9
}
#description{
width:420px;
height:188px;
overflow:hidden;
float:right;
margin-right:15px;
}
</style>
<script>
window.onload=function(){
var ele=document.getelementbyid("description");
var w=ele.clientwidth;
var n=20,t=20;
var timers=new array(n);
var c=document.getelementbyid("beni").getelementsbytagname("li");
for(var i=0;i<c.length;i++){
c[i].index=i;
c[i].onmouseo教程ver=doslide;
}
c=null;
function doslide(){
var x=ele.scrollleft;
var d=this.index*w-x;
if(!d) return;
for(var i=0;i<n;i++)(function(){
if(timers[i])
cleartimeout(timers[i]);
var j=i;
timers[i]=settimeout(function(){
ele.scrollleft=x+math.round(d*math.sin(math.pi*(j+1)/(2*n)));
},(i+1)*t);
})();
}
}
</script>
</head>
<body id=home>
<div id=outer>
<div id=wrapper>
<div id=content>
<div id=focus>
<ul id=beni>
<li class=first><a href="#">opere e oggetti d'arte</a></li>
<li><a href="#">architettzure</a></li>
<li><a href="#">reperti archeologici</a></li>
<li><a href="#">stampe e matrici di incisione</a></li>
<li><a href="#">fotografie</a></li>
<li><a href="#">beni etnoantropologici</a></li>
</ul>
<div id=description>
<img src="/images/uppic/200711272005030.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
补充：网页制作,js教程 
