你的位置:首页 > Java教程

[Java教程]jQuery插件之路(二)——轮播


还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了,觉得这些也是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;}

View Code

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 ></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)

View Code

以上就是差不多所有的代码了,一些比较关键的地方已经用注释好了,这里就不再叙述。如果有哪些不好的地方,万望告知,不胜感谢。今天就先写到这里了,作者敲键盘码字也不容易,如果你觉得你对本文还能提得上来那么一点点兴趣的话,请稍微移动下你的右手,帮点下赞,谢谢^_^。下面附上一张效果图