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) {//向前走button的效果

    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;

}