jquery的图片轮播模板类型

时间：2015-07-30 11:34:11 阅读：187 评论：0 收藏：0 [点我收藏+]

先说一下用到的几个重要的事件
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;
}

jquery的图片轮播模板类型

标签：jquery js javascript js

原文地址：http://blog.csdn.net/woshinannan741/article/details/47144217

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

jquery的图片轮播 模板类型

jquery的图片轮播模板类型