css+js简单应用

趁着周末，有时间也有心情，再次发表个网上已经有过很多例子的js控制左右图片滚动的代码，还是那句话，为了大家用之方便也为自己拿之方便。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<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(http://www.soojs.com/t/images/tile.gif) #eee repeat-y left top;

width:694px;

position: relative;

height: 180px

}

#description{

width:450px;/*=188*3+15*2 */

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;

margin: 0;

padding: 0;

padding-left:5;

padding-right: 5;

text-decoration: none;

}

.content a:hover {

color: #ffffff;

display: inline;

text-decoration: none;

}

img {border:0px}

</style>

</head>

<body>

</div>

</ul>

</div>

</div>

var ok_obj=document.getElementById("content").getElementsByTagName("LI")

var ok=Math.ceil(ok_obj.length/6)-1

var ele=document.getElementById("description");

var w=ele.clientWidth;

var n=20,t=50;

var timers=new Array(n);

var k=0;doSlide(0);

function doSlide(s){

if (k>=ok &&s>0|| k<=0 &&s<0)alert("抱歉,已经到头了!")

else{

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);

}

)();

}}

</script>

</body>

</html>