首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:34:21
原創
1391 人瀏覽過
複製代碼如下代碼:




>
圖片左右間隔滾動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,時間(控制速度的,值越小越快),是否自動播放。

身體>


效果圖如下:
jquery實現圖片左右間隔滾動特效(可自動播放)_jquery
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板