可控制左右翻滚的图片展示特效代码

发布时间：2014-08-22 09:34:18　来源/作者：学技巧网页制作　分类：图片特效阅读：0次点评一下

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>可控制左右翻滚的图片展示特效代码</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none} #wrap{width:600px;border:1px solid orange;height:100px;margin:55px auto;overflow:hidden;} #a li,#b li{float:left;width:110px;background:red;height:100px;margin-left:10px} #scrolls{width:200%;float:left;} #a,#b{float:left;} .left,.right{width:20px;height:20px;background:yellow;cursor:pointer;} </style> </head> <body> <div class="left" id="left" onclick="left()"><<</div> <div id="wrap"> <div id="scrolls"> <div id="a"> <ul> <li>22</li> <li></li> <li></li> <li></li> <li>11</li> </ul> </div> <div id="b"> </div> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id)}; var wrap = $("wrap"); var a = $("a"); var b = $("b"); var show = $("show"); var d; b.innerHTML = a.innerHTML; function scrolls(){ d = "n"; if(b.offsetWidth - wrap.scrollLeft <=0){ wrap.scrollLeft = wrap.scrollLeft - b.offsetWidth; } else{ wrap.scrollLeft++; } } t = setInterval("scrolls()",10) function backScrolls(){ if(wrap.scrollLeft <=0){ wrap.scrollLeft = wrap.scrollLeft + b.offsetWidth; } else{ wrap.scrollLeft--; } } function left(){ d = "n"; clearT(); t = setInterval("scrolls()",10); } function right(){ d = "m"; clearT(); t = setInterval("backScrolls()",10); } function clearT(){ clearInterval(t); } function runs(){ if(d == "n"){ left(); } else{ right(); } } wrap.onmouseover = function (){ clearT(); } wrap.onmouseout = function(){ runs(); } </script> </div> <div class="right" id="right" onclick="right()">>></div> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

JS代码的左右循环移动效果，通常用于图片展示，广告图片展示等。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

可控制左右翻滚的图片展示特效代码

JS实现鼠标点亮或熄灭灯泡特效

非常适合商品宣传的jquery幻灯切换特效

仿淘宝商品宝贝图片放大效果js特效