jQuery图片轮播插件——前端开发必看


Posted in Javascript onMay 31, 2016

还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO。有兴趣的朋友可以去看下吧。

先给大家附上效果图,如果大家感觉还不错,请参考实现代码

jQuery图片轮播插件——前端开发必看

好了废话不多说了,下面附上代码。

HTML部分:

<div class="slider">
<div class="ul-box">
<ul>
<li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/6.jpg"/></a></li>
</ul>
</div>
<div class="mask"></div>
<div class="prev"><img src="img/btn_l.png"/></div>
<div class="next"><img src="img/btn_r.png"/></div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/slider.js"></script>
<script>
$('.slider').slider({
width : 640, 
height : 270, 
during : 2000, //动画执行间隔
speed : 500, //动画速度
btnSize : 20, //底部遮罩层的按钮大小
btnSpace : 10, //底部的按钮间隙
direction : 1 //轮播方向默认为1,图片向左移动
});
</script>

CSS部分:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider{
position: relative;
overflow: hidden;
}
.slider ul{
list-style: none;
float: left;
}
.slider ul li{
float: left;
}
.slider .mask{
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, .3);
}
.slider .mask .sliderBtn{
position: absolute;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
background: radial-gradient(white 20%, transparent 50%);
}
.slider .prev, .slider .next{
position: absolute;
width: 45px; 
height: 100%;
background-color: rgba(0, 0, 0, .2);
cursor: pointer;
top: 0;
display: none;
}
.slider .prev{
left: 0;
}
.slider .next{
right: 0;
}
.slider .prev img, .slider .next img{
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}

JS部分:

(function ($) {
$.fn.slider = function (setting) { //给jQuery的实例对象绑定一个slider方法
var defaultSetting = {
width : 640,
height : 270,
during : 3000,
speed : 500,
btnSize : 30,
btnSpace : 10,
direction : 1
}
setting = $.extend(true, {}, defaultSetting, setting); //用传入的参数替换掉默认的设置 
return this.each(function (i, item) { 
var _setInterval = window.setInterval; 
window.setInterval = function (callback, timer, param) { //重写setInterval函数,让其可以传参
var args = Array.prototype.slice.call(arguments, 2); 
var _fn = function () {
callback.apply(null, args);
}
return _setInterval(_fn, timer);
}
var _this = $(this),
ulBox = $('.ul-box', this),
ul = $('ul', this),
li = $('li', ul),
img = $('img', li),
len = li.size(),
mask = $('.mask', this),
index = 0, //用来控制按钮的下标
flag = true, //标识动画是否执行完成
gap, //执行动画的按钮下标和当前按钮的下标的差
timer; //计时器
_this.width(setting.width).height(setting.height);
ulBox.width(setting.width * 3 * len).height(setting.height).css({
marginLeft: -setting.width * len
});
ul.width(setting.width * len).height(setting.height);
img.width(setting.width).height(setting.height);
mask.height(setting.btnSize + 2 * setting.btnSpace);
//添加btn
for(var i = 0, str = ''; i < len; i++){
str += '<div class="sliderBtn"></div>';
}
mask.html(str);
var ulFir = ul.clone(true);
var ulSec = ul.clone(true);
var sliderBtn = $('.sliderBtn', '.mask');
ulBox.append(ulFir);
ulBox.append(ulSec);
sliderBtn.each(function (i, item) {
$(item).css({
width : setting.btnSize,
height : setting.btnSize,
top : setting.btnSpace,
left : parseInt(setting.width - (setting.btnSize + setting.btnSpace *2) *len, 10) /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace
});
$(item).mouseenter(function () {
gap = Math.abs(i - index);
i > index ? (flag && ani(1, gap)) : (flag && ani(0, gap));
})
});
btnAni(0);
//按钮样式变化
function btnAni (index) {
$('.sliderBtn').css('background', 'radial-gradient(white 20%, transparent 50%)');
$('.sliderBtn').eq(index).css('background', 'radial-gradient(white 10%, transparent 30%, white 70%)');
}
//动画
function ani (direction, num) {
if(flag){
//默认1向左运动,0向右运动
flag = false;
var ulfir = $('ul', ulBox).eq(0);
var left = parseInt(ulfir.css('margin-left'), 10);
if(direction){
index += num;
index = index % len;
left = left - num * setting.width;
ulfir.animate({
marginLeft: left
}, setting.speed, function () {
if(left <= -len * setting.width){
ulfir = ulfir.remove(); 
ulfir.css('margin-left', 0);
ulBox.append(ulfir);
}
flag = true;
});
}else{
index -= num;
index = index <= -1 ? len - 1 : index;
left = left + num * setting.width;
ulfir.animate({
marginLeft: left
}, setting.speed, function () {
if(left >= len * setting.width){
var ulLast = $('ul', ulBox).eq(2).remove();
ulLast.css('margin-left', 0);
ulBox.prepend(ulLast);
ulfir.css('margin-left', 0);
}
flag = true
})
}
btnAni(index)
}
}
//定时器
timer = setInterval(ani, setting.during, setting.direction, 1);
_this.hover(function () {
$('.prev', this).css('display', 'block');
$('.next', this).css('display', 'block');
clearInterval(timer);
}, function () {
$('.prev', this).css('display', 'none');
$('.next', this).css('display', 'none');
timer = setInterval(ani, setting.during, setting.direction, 1);
})
$('.next').click(function () {
flag && ani(1, 1);
})
$('.prev').click(function () {
flag && ani(0, 1);
})
})
}
})(jQuery)

以上代码是小编给大家介绍的jQuery图片轮播插件代码,希望对大家有帮助,如果大家有疑问欢迎给我留言小编会及时回复大家的的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
javascript 写类方式之五
Jul 05 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
javascript 闭包详解
Jul 02 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 #Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 #Javascript
基于jQuery实现点击列表加载更多效果
May 31 #Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 #Javascript
Bootstrap表单布局样式代码
May 31 #Javascript
jQuery使用经验小技巧(推荐)
May 31 #Javascript
You might like
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
js控制框架刷新
2008/08/01 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
javascript的函数作用域
2014/11/12 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
javascript表单正则应用
2017/02/04 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python实现爬取并分析电商评论
2020/06/19 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
数据库方面面试题
2012/04/22 面试题
建筑工程技术应届生求职信
2013/11/17 职场文书
继承权公证书
2014/04/09 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
节约能源标语
2014/06/17 职场文书
医学专业大学生求职信
2014/07/12 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Redis RDB技术底层原理详解
2021/09/04 Redis
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python