间歇向上滚动的图片JS代码
间歇向上滚动的图片JS代码像翻牌一样的效果,1秒向上滚动一排图片(类似于幻灯片效果),求JS代码!!...
间歇向上滚动的图片JS代码 像翻牌一样的效果,1秒向上滚动一排图片(类似于幻灯片效果),求JS代码!!
展开
1个回答
展开全部
<!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>
记得采纳啊
记得采纳啊
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
