<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> <br> <br><meta content="text/html; charset=utf-8" /> <br><title>写真左右分離滚動Jquery特效</title> <br><style type="text/css"> <br>*{ マージン:0px;パディング: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:訪問しました{color:#383455;font-size:12px;} <br>img{ border:none;} <br>.hl_main5_content{width:898px;高さ:155ピクセル;ボーダートップ:なし;マージン左:1px; margin:100px auto;} <br>.hl_main5_content1{width:838px;margin-top:5px;オーバーフロー:非表示;フロート:左; margin-left:15px;} <br>.hl_main5_content1 ul{width:1600px; overflow:hidden;} <br>.hl_main5_content1 ul li{ float:left;幅:200ピクセル;表示:インライン;ボーダー:1px #FF0000 ソリッド; margin-right:10px;} <br>.hl_main5_content1 ul li img{ width:200px; } <br>.hl_scrool_leftbtn{幅:14px;高さ:38ピクセル;背景:#ccc url(hl_scroll_left.jpg) 繰り返しなし;フロート:左;マージントップ:50px;カーソル:ポインター;} <br>.hl_scrool_rightbtn{幅:14px;高さ:38ピクセル;背景:#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> <br> <br><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"> </スクリプト> <br><script type="text/javascript"> <br>var flag = "左"; <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 = 速度; <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>}; <br>prev.click(function(){ <br>img.find('li:last').prependTo(img); <br>img.css({'margin-left':-w}); <br>img.animate({'margin-left':0}); <br>フラグ = "右" <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> は自動プレイをサポートし、左右のポイントのポイント プレイもサポートします。 <div>写真を含むdiv、時間(制御速度、値が小さいほど速い)、自動再生かどうか。 <br></body> <br></html> <br><br> 效果图如下：<br><br>
