banner笔记

今天忽然在项目中遇到了一个简单的jq轮播，忽然发现不会写了，费了好长时间回顾才弄出来轮播代码。做个学习笔记，不喜勿喷。

采用改变ul的marginleft值，采用jq的animate方法

var ulobj=$("ul");//找到ul

var liobj=$("li");//找到li

var liwd=liobj.eq(0).width();//获取第一个li的宽度

var lilen=$("li").length;//获取li的个数

ulobj=$("ul").css('width',(lilen*liwd)); //算出ul总共的宽度,要在css里面设置li的float:left ,ul的父元素设置overflow:hidden,

//保证ul在进入页面时候自运行

var t=0;

(function(){setInterval(showlog(),2500);})();//间隔设置为2.5秒一次轮播

//鼠标移入取消轮播 移出开始轮播

$("#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带左右切换轮播，以后有机会会补上带下面轮播点的代码