jquery實現圖片左右間隔滾動特效(可自動播放)_jquery

複製代碼如下代碼：

>


*{ 邊距：0px;內邊距：0px；字型大小：12px;}
a{ 文字裝飾：無;字型大小：12px;}
a:link{顏色:# 383455;font-size:12px;}
a:hover{顏色:#ff0000;font-size:12px;}
a:造訪過{顏色：#383455;字體大小：12px;}
img{ border:none;}
.hl_main5_content{寬度:898px;高度：155px；頂部邊框：無；左邊距：1px；邊距：100px 自動;}
.hl_main5_content1{寬度：838px;邊距邊距寬度;上方：5px;溢位：隱藏；浮動：左；左邊距：15px;}
.hl_main5_content1 ul{寬度：1600px;}
.hl_main5_content1 ul{寬度：1600px;溢位：隱藏；}
.hl_main5_content1 ul li{ float:left;寬度：200px；顯示：內嵌；邊框：1px #FF0000 實心；右邊距：10px;}
.hl_main5_content1 ul li img{ width:200px; }
.hl_scrool_leftbtn{寬度：14px;高度：38pccc url(hl_scroll_left.jpg) 不重複；浮動：左；頂部邊距：50px；遊標：指標；}
.hl_scrool_rightbtn{寬度：14px;高度：38px；背景：#ccc url(hl_scroll_right.jpg) 不重複重複. ；浮動：右；上邊距：50px；遊標:指針;}
;
頭>

;

• 


• >


• >


• >


• >


• >


• >

腳本>

var flag = "left";
function DY_scroll(wrapper,prev,next,img,speed,or){
varwrapper = $(wrapper);
var prev = $(prev);
var next = $(next);
var img = $(img).find('ul');
var w = img.find('li').outerWidth(true);
var s = 速度;
next.click(function(){
img.animate({'margin-left':-w},function(){
img.find('li').eq(0) . addTo(img);
img.css({'margin-left':0});
flag = "left"
});
prev.click(function(){
img.find('li:last').prependTo(img);
img.css({'margin-left':-w});
img.animate({'margin-left' :0});
flag = "right"
});
if (or == true){
ad = setInterval(function() { flag == "left" ? next. click() : prev.click()},s*1000);
wrapper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() {flag == " left" ? next.click() : prev.click()}, s*1000);});
}
}
DY_scroll('.hl_main5_content','.hl_scrool_leftbtn','.btn ','.hl_main5_content1',3,true);// true為自動播放，不加此參數或false就預設不自動
;

支援自動播放的開關與關閉，同時支援左右箭頭的點擊播放。主要是修改DY_scroll()裡面的參數，第一個參數hl_main5_content是最外層的div的類，其次是左邊按紐，右邊按紐，包含圖片的div，時間（控制速度的，值越小越快），是否自動播放。

身體>


效果圖如下：