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

前端技术 2023/09/01 JavaScript

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

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

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

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图片轮播插件代码，希望对大家有帮助，如果大家有疑问欢迎给我留言小编会及时回复大家的的，在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/1232

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案