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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
详解React中setState回调函数
Jun 14 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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 防注入函数(格式化数据)
2011/08/08 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python输入多行字符串的方法总结
2019/07/02 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
自我反省检讨书
2014/01/23 职场文书
服务承诺书范文
2014/05/19 职场文书
宣传普通话标语
2014/06/27 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
公司合作协议范文
2014/10/01 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
八年级语文教学反思
2016/03/03 职场文书