jquery的图片轮播 模板类型

先说一下用到的几个重要的事件
j
jQuery on()方法是官方推荐的绑定事件的一个方法。
$(selector).on(event,childSelector,data,function,map)+


对于on绑定的事件是可以移除的  用的是off()方法
比如：$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");




animate( params, [duration], [easing], [callback] ) 
用于创建自定义动画的函数。 
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 




stop( [clearQueue], [gotoEnd] ) 
停止所有在指定元素上正在运行的动画。 
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行 








$(function(){
var loopTime = 3000,   //设置了轮播的时间
   animTime = 500;    //设置播放动画时间
    
var sliderPlayer = $('.sliderPlayer'),
   sliderHolder = $('.sliderHolder'),
   sliderDiv = $('.sliderDiv'),
   sliderBtnSpans = $('.sliderBtn span'),
   sliderPre = $('BtnPre'),
   sliderNext = $('BtnNext');


var Width = sliderPlayer.width(),
   Height = sliderPlayer.height(),
   len = sliderDiv.width(Width).height(Height).length;


   sliderHolder.width(Width*len).height(Height);   
    
    var i=0;
function sliderToNext () {   //这个就是轮播的主函数
if (i >= len-1) {
            var LastDiv = $(".sliderDiv:last").remove();//获取到最后一个移动的div  然后把它移除
            sliderHolder.prepend(LastDiv);//把获取到的div放在整个的最前面
            sliderHolder.css('left', '0').stop().animate({"left":-(Width)+"px"}, animTime,
            //现在的顺序是4123 显示1  也就是第二张
            function(){
            var firstDiv = sliderHolder.find('.sliderDiv:first').remove(); //获取第一张也就是4，然后移除
            sliderHolder.append(firstDiv).css("left","0");//现在的顺序是1234  显示本来的1
            });
            i=0;
}else{
++i;
sliderHolder.stop().animate({"left":(-Width*i)+"px"},animTime);//逐渐向后走
}
sliderBtnSpans.removeClass("cur").eq(i).addClass("cur");//下面的点
}


var t = setInterval(sliderToNext,loopTime); //设置定时器进行轮播


sliderBtnSpans.each(function(index,element){  //这个是当鼠标放在下面四个按键上面停止和移开播放
$(this).on("mouseenter",function(){//当鼠标经过的时候
i=index-1;//变化指定的值
clearInterval(t);//关闭定时器
sliderToNext();//继续函数
}).on("mouseout",function(){//鼠标移出的时候
t=setInterval(sliderToNext,loopTime);//重新开始定时器
});
});
    
    sliderPlayer.find('.BtnPre').click(function(event) {//向前走按钮的效果
    if(i>0) i = i -2;
else i = len - 2;
sliderToNext();
    });
    $('.BtnNext').click(function(event) {//向后走效果
    sliderToNext();
    });


})






下面的html
<div class="sliderPlayer">
<div class="sliderHolder">
<div class="sliderDiv"><a href="#"><img src="images/slider.png" alt="11111111133"></a></div>
<div class="sliderDiv"><a href="#"><img src="images/slider.png" alt="2222222333"></a></div>
<div class="sliderDiv"><a href="#"><img src="images/slider.png" alt="1233333333"></a></div>
<div class="sliderDiv"><a href="#"><img src="images/slider.png" alt="444444444444333"></a></div>
<a class="clear"></a>
</div>
   <a href="##" class="BtnPre"></a>
<a class="BtnNext"></a>
<div class="sliderBtn">
<span class="cur"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>






css布局




.sliderPlayer{
margin: 0 auto;
width: 1170px;
height: 403px;
position: relative;
overflow: hidden;
}
.sliderHolder {
height: 406px;
position:absolute;
top:0px;
}
.sliderDiv{
float:left; 
}
.sliderHolder img{
display:block;
margin:0;
padding:0;
}
.sliderBtn{
position: absolute;
bottom: 20px;
left: 500px;
}
span.cur{
background:#fff;
}
.BtnPre{
position: absolute;
left: 0px;
top: 150px;
background-image:url(../images/tujian.png); 
background-position:-61px 50%;
height: 60px;
width: 50px;
}
.BtnNext{
position: absolute;
right: 0px;
top: 150px;
background-image:url(../images/tujian.png); 
background-position:-1184px 50%;
height: 60px;
width: 50px;
}
.sliderBtn{
position:absolute;
left: 525px;
bottom:12px;
text-align:right;
}
.sliderBtn span{
display: inline-block;
margin: 0 5px;
width: 14px;
height: 14px;
background:#fff;
cursor:pointer;
border-radius: 50%;
}
span.cur{
background:#1b489e;
}