今天忽然在項目中遇到了一個簡單的jq輪播，忽然發(fā)現(xiàn)不會寫了，費了好長時間回顧才弄出來輪播代碼。做個學(xué)習(xí)筆記，不喜勿噴。
采用改變ul的marginleft值，采用jq的animate方法
var ulobj=$("ul");//找到ul
var liobj=$("li");//找到li
var liwd=liobj.eq(0).width();//獲取第一個li的寬度
var lilen=$("li").length;//獲取li的個數(shù)
ulobj=$("ul").css('width',(lilen*liwd)); //算出ul總共的寬度,要在css里面設(shè)置li的float:left ,ul的父元素設(shè)置overflow:hidden,
//保證ul在進入頁面時候自運行
var t=0;
(function(){setInterval(showlog(),2500);})();//間隔設(shè)置為2.5秒一次輪播
//鼠標(biāo)移入取消輪播 移出開始輪播
$("#banner").hover(function(){
? ? clearInterval(t);
},function(){
? ? t=setInterval(showlog(),2500)
});
$(".left").click(function(){showlog()}) //點擊左面進行輪播
$(".right").click(function(){
ulobj.css('marginleft',(-liwd)+"px")
ulobj.children("li:last").insertBefore(ulobj.children("li:first"))
ulobj.animate({"marginleft":"0px"})
})
function showlog(){
ulobj.animate({"marginleft":(-liwd)+"px"},500,function(){
ulobj.children("li:first").insertAfter(ulobj.children("li:last"))
ulobj.css("marginleft","0")
});
}
這是jq帶左右切換輪播，以后有機會會補上帶下面輪播點的代碼
