<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>*{ 여백: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> <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="/static/imghwm/default1.png" data-src="images/hl_scr.jpg" class="lazy" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" ></a></li> <br><li><a href="" title=""><img src="/static/imghwm/default1.png" data-src="images/hl_scr1.jpg" class="lazy" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" ></a></li> <br><li><a href="" title=""><img src="/static/imghwm/default1.png" data-src="images/hl_scr2.jpg" class="lazy" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" ></a></li> <br><li><a href="" title=""><img src="/static/imghwm/default1.png" data-src="images/hl_scr3.jpg" class="lazy" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" ></a></li> <br><li><a href="" title=""><img src="/static/imghwm/default1.png" data-src="images/hl_scr1.jpg" class="lazy" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" ></a></li> <br><li><a href="" title=""><img src="/static/imghwm/default1.png" data-src="images/hl_scr2.jpg" class="lazy" alt="jquery는 그림의 왼쪽 및 오른쪽 간격 스크롤 효과를 실현합니다(자동으로 재생할 수 있음)_jquery" ></a></li> <br><li><a href="" title=""><img src="/static/imghwm/default1.png" data-src="images/hl_scr3.jpg" class="lazy" 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"> </스크립트> <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>