首頁 > web前端 > js教程 > 圖片Slider 帶左右按鈕的js範例_javascript技巧

圖片Slider 帶左右按鈕的js範例_javascript技巧

WBOY
發布: 2016-05-16 17:23:45
原創
1002 人瀏覽過
複製代碼如下代碼:

渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>
?????? 標題>


body,ul,li { 填充:0; margin:0}
ul,li { list-style:none}
.img-scroll { 位置:relative;邊距:20px 自動;寬度:440px;}
.img-scroll .prev,.img-scroll .next { 位置:絕對;顯示:塊;寬度:50px;高度:100px;背景顏色: #000;
頂部:0;顏色:#FFF;文字對齊:居中;行高:100px}
.img-scroll .prev { 左:0}
.img-scroll .next { 右:0}
.img-list { 位置:相對;寬度:320px;高度:100px;左邊距:60px;溢位:隱藏}
.img-list ul { width:9999px;}
. img-list li { float:left; }顯示:內嵌;寬度:100px;右邊距:10px;高度:100px;背景顏色:#BDBDDF;文字對齊:居中;行高:100px;}
style>
頭>



prev;
下一個

    ;
  • 1

  • 2
  • 3

  • 4





函數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).appendTo(img);
img.css({'margin-left':0});
});
prev.click(function()
{
img.find('li:last').prependTo(img);
img.css({'margin-left':-w} );
img.animate({'margin-left':0});
});
if(或== true)
{
ad = setInterval(function() { next .click();},s*1000);
wrapper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();}, s*1000);});

}
}
DY_scroll('.img-scroll','.prev','.next','.img-list',3, false);
腳本>


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