var ss=1,t2; function doSlide(s){ clearTimeout(t2); ss=s; if (k>=ok &&s>0){ele.scrollLeft=w;k=1;}//alert(ele.scrollLeft); if (k<1 &&s<0){ele.scrollLeft=(ok-1)*w;k=ok-1} k+=s; var x=ele.scrollLeft var d=k*w-x; for(var i=0;i<n;i++)( function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; // alert(x) timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t); } )(); t2=setTimeout ("auto_scroll()",3000) } function auto_scroll(){ doSlide(ss) //var t2=setTimeout ("auto_scroll()",3600) } var t0=setTimeout ("auto_scroll()",2000) </script> </body> </html>
<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css+js控制图片展示</title>
<style>
body{
padding: 0px;
margin: 0px;
font: 70% verdana, geneva, arial, helvetica, sans-serif;
color: #000;
text-align: center
}
#outer{
padding: 0px;
margin: 0px;
width: 800px;
text-align: center
}
#focus{
border: #ccc 2px solid;
margin: 0px;
padding: 0px;
padding-top: 15px;
background: url(/images/tile.gif) #eee repeat-y left top;
width:694px;
position: relative;
height: 180px
}
#description{
height:150px;
overflow:hidden;
margin-right:0px;
float:left;
}
.dis{
float:left;
width:40px;
text-align: center;
padding-top:50px
}
#description ul, #description li {
float:left;
display: inline;
margin: 0;
padding: 0;
height:150px
}
.content a:active,
.content a:visited,
.content a:link {
display: inline;
text-decoration: none;
}.content a:hover {
color: #ffffff;
display: inline;
text-decoration: none;
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=outer>
<div id=focus>
<div class="dis">
<img id="img_l" src="btn_left.jpg" alt="向左滚动" onClick="doSlide(-1)" />
</div>
<div id=description class=description>
<div id="content0">
<ul id="content" class="content" onMouseMove="clearTimeout(t0);clearTimeout(t2);" onMouseOut="t2=setTimeout ('auto_scroll()',3000)">
<li><a href="#"><img src="rounded.gif" alt="rounded" /></a></li>
<li><a href="#"><img src="rounded.gif" alt="rounded" /></a></li>
<li><a href="#"><img src="rounded.gif" alt="rounded" /></a></li>
<li><a href="#"><img src="rounded2.gif" alt="rounded2" /></a></li>
<li><a href="#"><img src="rounded2.gif" alt="rounded2" /></a></li>
<li><a href="#"><img src="rounded2.gif" alt="rounded2" /></a></li>
<li><a href="#"><img src="rounded3.gif" alt="rounded3" /></a></li>
<li><a href="#"><img src="rounded3.gif" alt="rounded3" /></a></li>
<li><a href="#"><img src="rounded3.gif" alt="rounded3" /></a></li>
</ul>
</div>
</div>
<div class="dis">
<img id="img_r" src="btn_right.gif" alt="向右滚动" onClick="doSlide(1)" />
</div>
</div>
</div>
<script>
var img_pad=5//图片间隔
var img_w=188//图片宽
var img_n=3//每窗图片数
document.write ("<style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";}</style>")
var win_w=img_w*img_n+(img_pad*3)*(img_n-1)
document.getElementById("description").style.width=win_w
document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML
var ok_obj=document.getElementById("content0").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1;
document.getElementById("content0").style.width=(ok+1)*win_w
var ele=document.getElementById("description");
var w=ele.clientWidth;
var n=20,t=50;
var timers=new Array(n);
var k=0;doSlide(0);
var ss=1,t2;
function doSlide(s){
clearTimeout(t2);
ss=s;
if (k>=ok &&s>0){ele.scrollLeft=w;k=1;}//alert(ele.scrollLeft);
if (k<1 &&s<0){ele.scrollLeft=(ok-1)*w;k=ok-1}
k+=s;
var x=ele.scrollLeft
var d=k*w-x;
for(var i=0;i<n;i++)(
function(){
if(timers[i]) clearTimeout(timers[i]);
var j=i;
// alert(x)
timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
}
)(); t2=setTimeout ("auto_scroll()",3000)
}
function auto_scroll(){
doSlide(ss)
//var t2=setTimeout ("auto_scroll()",3600)
}
var t0=setTimeout ("auto_scroll()",2000)
</script>
</body>
</html>
我这代码如果你把http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 这个加上去就不行了
我是想看还有什么其他的代码 能实现同样的效果