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;
}
最新文章
- 结合实例详细介绍encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()使用方法
- Android按钮的各个样式设置
- 淘金客II项目问题日志(AngularJs+BootStrap+Api接口开发)
- ADO.NET中的DataSet和DataAdapter
- StringTokenizer用法
- hdu 2736 Surprising Strings(类似哈希,字符串处理)
- linux mkfs命令参数及用法详解---linux格式化文件系统命令(包括swap分区)
- const,readonly,static
- HTTP&#160;错误
- JavaScript高级程序设计:第九章
- Matlab: 白噪声与曲线拟合
- ZooKeeper笔记——技术点汇总
- uvaLive7303 Aquarium (kruskal)
- 一脸懵逼学习Hadoop分布式集群HA模式部署(七台机器跑集群)
- the principle of redbalck tree
- git修改提交的用户名
- 棋盘问题---poj1321(dfs)
- import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。
- java根据日期获取周几和获取某段时间内周几的日期
- [转]Clean up after Visual Studio