您的位置：首页 > Web前端 > JavaScript

JS控制图片滚动的效果

2011-11-08 17:56 615 查看

<!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].onmouseover=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="http://www.lanrentuku.com/down/js/images/12447871590.jpg" />

</div>

</div>

</div>

</div>

</div>

<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航