<div class="codetitle"> <span><a style="CURSOR: pointer" data="88952" class="copybut" id="copybut88952" onclick="doCopy('code88952')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code88952"> <br> <br> <br> <br><meta content="text/html; charset=utf-8"> <br><title>图片左右间隔滚动Jquery特效</title> <br><style type="text/css"> <BR>*{ margin:0px; padding:0px; font-size:12px;} <BR>a{ text-decoration:none; font-size:12px;} <BR>a:link{color:#383455;font-size:12px;} <BR>a:hover{color:#ff0000;font-size:12px;} <BR>a:visited{color:#383455;font-size:12px;} <BR>img{ border:none;} <BR>.hl_main5_content{width:898px; height:155px; border-top:none; margin-left:1px; margin:100px auto;} <BR>.hl_main5_content1{width:838px;margin-top:5px; overflow:hidden; float:left; margin-left:15px;} <BR>.hl_main5_content1 ul{width:1600px; overflow:hidden;} <BR>.hl_main5_content1 ul li{ float:left; width:200px; display:inline; border:1px #FF0000 solid; margin-right:10px;} <BR>.hl_main5_content1 ul li img{ width:200px; } <BR>.hl_scrool_leftbtn{width:14px; height:38px; background:#ccc url(hl_scroll_left.jpg) no-repeat; float:left; margin-top:50px; cursor:pointer;} <BR>.hl_scrool_rightbtn{width:14px; height:38px; background:#ccc url(hl_scroll_right.jpg) no-repeat; float:right;margin-top:50px; cursor:pointer;} <BR></style> <br> <br> <br><div class="hl_main5_content"> <br><div class="hl_scrool_leftbtn"></div> <br><div class="hl_scrool_rightbtn"></div> <br><div class="hl_main5_content1"> <br><ul> <br><li><a href="" title=""><img src="images/hl_scr.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br><li><a href="" title=""><img src="images/hl_scr1.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br><li><a href="" title=""><img src="images/hl_scr2.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br><li><a href="" title=""><img src="images/hl_scr3.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br><li><a href="" title=""><img src="images/hl_scr1.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br><li><a href="" title=""><img src="images/hl_scr2.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br><li><a href="" title=""><img src="images/hl_scr3.jpg" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" ></a></li> <br> </ul> <br> </div> <br> </div> <br> </div> <br><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"> </script> <br><script type="text/javascript"> <BR>var flag = "left"; <BR>function DY_scroll(wraper,prev,next,img,speed,or){ <BR>var wraper = $(wraper); <BR>var prev = $(prev); <BR>var next = $(next); <BR>var img = $(img).find('ul'); <BR>var w = img.find('li').outerWidth(true); <BR>var s = speed; <BR>next.click(function(){ <BR>img.animate({'margin-left':-w},function(){ <BR>img.find('li').eq(0).appendTo(img); <BR>img.css({'margin-left':0}); <BR>}); <BR>flag = "left"; <BR>}); <BR>prev.click(function(){ <BR>img.find('li:last').prependTo(img); <BR>img.css({'margin-left':-w}); <BR>img.animate({'margin-left':0}); <BR>flag = "right"; <BR>}); <BR>if (or == true){ <BR>ad = setInterval(function() { flag == "left" ? next.click() : prev.click()},s*1000); <BR>wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() {flag == "left" ? next.click() : prev.click()},s*1000);}); <BR>} <BR>} <BR>DY_scroll('.hl_main5_content','.hl_scrool_leftbtn','.hl_scrool_rightbtn','.hl_main5_content1',3,true);// true为自动播放，不加此参数或false就默认不自动 <BR></script> <br><div style="margin:0 auto; width:950px;"> <br>支持自动播放的开启与关闭,同时支持左右箭头的点击播放。主要是修改DY_scroll()里面的参数,第一个参数hl_main5_content是最外层的div的class，其次是左边按纽,右边按纽,包含图片的div,时间(控制速度的,值越小越快),是否自动播放。</div> <br> <br> <br> <br>效果图如下：<br><img src="http://files.jb51.net/file_images/article/201305/201358170831241.jpg?20134817859" alt="jquery实现图片左右间隔滚动特效(可自动播放)_jquery" >
