欢迎来到福编程网,本站提供各种互联网专业知识!

jQuery插件实现图片轮播特效

发布时间:2016-06-16 作者:蜀北乔少恭 来源:转载
浏览各大网站,很多都少不了轮播效果,如何控制这些图片在一个方向上连续的滚动?这篇文章就为为大家详细介绍了jQuery插件实现图片轮播特效的代码,感兴趣的小伙伴们可以参考一下

好了废话不多说了,先看看效果图。

HTML部分:

 

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 += '
'; } 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)

以上就是差不多所有的代码了,一些比较关键的地方已经用注释好了,这里就不再叙述。

源码下载:https://github.com/wwervin72/jQuery/tree/master/slider-2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐