js之按钮控制图片滚动效果

作者：caiying2007 来源：bbs 整理日期：2007-10-27

<!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: 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>        
          <li><a href="#"><img 
          src="rounded-12.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded-12.gif"/></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)
}
setTimeout ("auto_scroll()",2000)
</script>
</body>
</html>

【相关文章】