先说一下用到的几个重要的事件
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;
}
版权声明：本文为博主原创文章，未经博主允许不得转载。