<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><!DOCTYPE html > <br><html> <br><머리> <br><meta content="text/html; charset=utf-8" /> <br><title>图文左右间隔滚动Jquery特效</title> <br><style type="text/css"> <br>*{ 여백:0px; 패딩:0px; 글꼴 크기:12px;} <br>a{ 텍스트 장식:없음; 글꼴 크기:12px;} <br>a:link{color:#383455;font-size:12px;} <br>a:hover{color:#ff0000;font-size:12px;} <br>a: 방문함{color:#383455;font-size:12px;} <br>img{ border:none;} <br>.hl_main5_content{width:898px; 높이:155px; 테두리 상단:없음; 여백-왼쪽:1px; 여백:100px 자동;} <br>.hl_main5_content1{너비:838px;margin-top:5px; 오버플로:숨김; 부동:왼쪽; 여백-왼쪽:15px;} <br>.hl_main5_content1 ul{너비:1600px; 오버플로:숨김;} <br>.hl_main5_content1 ul li{ float:left; 너비:200px; 표시:인라인; 테두리:1px #FF0000 솔리드; margin-right:10px;} <br>.hl_main5_content1 ul li img{ 너비:200px; } <br>.hl_scrool_leftbtn{너비:14px; 높이:38px; 배경:#ccc url(hl_scroll_left.jpg) 반복 없음; 부동:왼쪽; 여백 상단:50px; 커서:포인터;} <br>.hl_scrool_rightbtn{너비:14px; 높이:38px; 배경:#ccc url(hl_scroll_right.jpg) 반복 없음; float:right;margin-top:50px; 커서:포인터;} <br></style> <br></head> <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" /></a></li> <br><li><a href="" title=""><img src="images/hl_scr1.jpg" /></a></li> <br><li><a href="" title=""><img src="images/hl_scr2.jpg" /></a></li> <br><li><a href="" title=""><img src="images/hl_scr3.jpg" /></a></li> <br><li><a href="" title=""><img src="images/hl_scr1.jpg" /></a></li> <br><li><a href="" title=""><img src="images/hl_scr2.jpg" /></a></li> <br><li><a href="" title=""><img src="images/hl_scr3.jpg" /></a></li> <br></ul> <br></div> <br></div> <br></div> <br><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"> </스크립트> <br><script type="text/javascript"> <br>var 플래그 = "왼쪽"; <br>함수 DY_scroll(wraper,prev,next,img,speed,or){ <br>var Wraper = $(wraper); <br>var prev = $(prev); <br>var next = $(다음); <br>var img = $(img).find('ul'); <br>var w = img.find('li').outerWidth(true); <br>var s = 속도; <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 (또는 == 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>자체적으로 작동하는 방식은 다음과 같습니다. 콘텐츠는 외부 div의 클래스, 其次是左边按纽,右边按纽,包含图放,时间(控纽,值越小越快),是否自动播放。</div> <br></body> <br></html> <br> </div> <br>效果图如下：<br><img src="http://files.jb51.net/file_images/article/201305/201358170831241.jpg?20134817859" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" >
