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 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
js实现页面图片消除效果
Mar 24 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
JQuery toggle使用分析
2009/11/16 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Python深入学习之装饰器
2014/08/31 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
农民工工资承诺书范文
2014/03/31 职场文书
学生操行评语大全
2014/04/24 职场文书
合作协议书范本
2014/10/25 职场文书
大学生助学金感谢信
2015/01/21 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android