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

複製代碼如下代碼：

渡//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);
腳本>