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="data:images/slider.png" alt="11111111133"></a></div>
<div class="sliderDiv"><a href="#"><img src="data:images/slider.png" alt="2222222333"></a></div>
<div class="sliderDiv"><a href="#"><img src="data:images/slider.png" alt="1233333333"></a></div>
<div class="sliderDiv"><a href="#"><img src="data: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;
}
转载于:https://www.cnblogs.com/llguanli/p/7094499.html
jquery的图片轮播 模板类型相关推荐
- PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
- 利用jQuery实现图片轮播
利用jQuery实现图片轮播 需求 实现步骤 一.获取相关对象 二.设置切换按钮 三.设置图片首尾相接效果 四.随图片切换更新小圆点 五.点击小圆点切换图片 六.鼠标无操作时图片自动轮播 示例 需求 ...
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- jquery:手风琴图片轮播
jquery:手风琴图片轮播 html部分: <!DOCTYPE html> <html> <head lang="en"><meta c ...
- html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- 使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能 文章目录 使用jQuery实现图片轮播与切换功能 效果图 一.body 二.jQuery 三.css 四.小结 效果图 一.body <body>& ...
- 原生Js_简易图片轮播模板
功能:图片自动循环轮播,通过点击"上一张","下一张"按钮来控制图片的切换 <!DOCTYPE html> <html><head ...
- 小博老师演示常用JQuery效果 ——图片轮播
2019独角兽企业重金招聘Python工程师标准>>> [理论知识] 我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery ...
- html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
最新文章
- 网络编程学习笔记(gai_strerror函数)
- linux下zip2
- swoole TCP UDP server
- 【python】数据结构与算法之快速排序(重要)
- Teams的Incoming Webhook
- 解决ERROR 1396 (HY000): Operation ALTER USER failed for root@localhost
- 学计算机的想当警察去一线,想当警察但又怕收入不高,我到底该选择梦想还是现实?...
- python 英语翻译 excel_翻译篇Day2-用python读写Excel–数据图表篇
- java 参数内存释放_JNI创建变量和释放变量
- SQLServer数据库差异备份
- 【github系列】github上传空目录
- js禁用按钮_探索js让你的网页“自己开口说话”
- 面试指南(二):想跳槽,这些技术点你会了吗?
- Java Web 高性能开发,第 1 部分: 前端的高性能
- mac使用Java命令运行Java程序
- GBase数据库迁移工具介绍
- Ubuntu下载软件包网速过慢的解决方法
- 苹果手机开热点电脑/安卓手机无法链接?
- Hybrid Blockchain Database Systems: Design and Performance(VLDB‘2022)
- GetKeyState 和 GetAsyncKeyState 区别