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的获取mouse坐标插件的实现代码
Apr 01 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
详解puppeteer使用代理
Dec 27 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JavaScript实现网页留言板功能
Nov 23 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP编程风格规范分享
2014/01/15 PHP
Javascript操作cookie的函数代码
2012/10/03 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python基础之函数用法实例详解
2014/09/10 Python
python实现清屏的方法
2015/04/30 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python处理xml文件的方法小结
2017/05/02 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python自动抢红包教程详解
2019/06/11 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
毕业设计论文评语
2014/12/31 职场文书
小学德育工作总结2015
2015/05/12 职场文书
小学家长意见怎么写
2015/06/03 职场文书
死亡诗社观后感
2015/06/05 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
HTTP中的Content-type详解
2022/01/18 HTML / CSS