1、圖片捲動
代碼如下:
"); //新增一個div,以控制偏移量
$(box_div).append($(box_frame).clone()); //複製一個ul並新增至div中,為了實現無縫循環
$(box_div).append($(box_frame).clone()); //複製一個ul並加入div中,為了實現無縫循環
var li_size = $ (_box).find("li").size(); //取得li的數量 var li_width = $(box_frame).children("li").width(); //取得li的寬度
var box_div_width = $(box_div).width(li_size * li_width * 5); //設定div的寬度
$(box_frame).css("float", "left")
var dd = setInterval(gd, 30);
function gd() {
var position = $(_box). var position = $(_box)。 🎜> $(_box).scrollLeft(position 1);
if (position >= $(box_frame).width()) { $(__box).scroll(_box);總長
}
$(_box).mouseleave(function () {
dd = setInterval( clearInterval(dd );
});
}
複製程式碼
程式碼如下:
幻灯片切换
");
$(cls+" div").attr("class","iframe");
var li = $(cls).find("li").size();//统计多少张图片
var li_width = $(cls).find("li").width(); //获取li的宽度
$(cls + " div").children("ul").width(li_width * li);//设置宽度,使图片排成一排
var s = "
";
$(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
var _i = 0;//当前的编号
$(cls).find(".button li").each(function (i) {
//生成按钮点击事件
$(this).click(function () {
_i = i;
$(this).attr("class", "on").siblings().removeAttr("class");//设置class,没必要再多加一个off
$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
});
}).eq(0).click();
function tt() {//定时器函数
_i++;
_i = _i % li;
$(cls).find(".button li").eq(_i).click();//自动点击切换图片
}
var t = setInterval(tt, 3000);//定时器
$(cls).hover(function () {
clearInterval(t);//鼠标经过清除定时器,离开时又触发
}, function () {
t = setInterval(tt, 3000);
})
}
">
" width="280" height="280" alt="Jquery圖片滾動與幻燈片的實例代碼_jquery" //>;