轮播图插件需要思考那些不确定因 jq轮播图插件 - 图1代码如下

    1. (function ($) {
    2.     function Swiper(option, self) {
    3.         // dom 元素
    4.         this.list = option.list || [];
    5.         // 宽度
    6.         this.width = option.width || $(self).width();
    7.         // 高度
    8.         this.height = option.height || $(self).height();
    9.         // 轮播方式 type:  'animation'(从左到右的轮播) 'fade' (淡入淡出的轮播)
    10.         this.type = option.type || 'fade';
    11.         // 是否自动轮播
    12.         this.autoChange = typeof option.autoChange === 'undefined' ? true : option.autoChange;
    13.         // 轮播时间
    14.         this.autoTime = option.autoTime || 5000;
    15.         // 是否展示左右按钮 showChangeBtn: 'always', 'hover', 'hidden'
    16.         this.showChangeBtn = option.showChangeBtn || 'always';
    17.         // 是否展示小圆点
    18.         this.showSpotBtn = typeof option.showSpotBtn === 'undefined' ? true : option.showSpotBtn;
    19.         // 小圆点的位置 spotPosition： 'left'， 'right', 'center'
    20.         this.spotPosition = option.spotPosition || 'left';
    21.         // 小圆点的颜色
    22.         this.spotColor = option.spotColor || 'red';
    23.         // 校园度的尺寸
    24.         this.sportSize = option.sportSize || 10;
    25.         this.listLen = this.list.length;
    26.         this.warp = self;
    27.         this.nowIndex = 0;
    28.         this.timer = null;
    29.         this.flag = true;
    31.     }
    32.     Swiper.prototype.init = function () {
    33.         this.createDom()
    34.         this.initStyle()
    35.         this.bindEvent()
    36.         this.autoMove()
    37.     }
    38.     /**
    39.      * 创建html结构
    40.      */
    41.     Swiper.prototype.createDom = function () {
    42.         // 创建轮播图包含块 轮播区域 小圆点
    43.         var swiperWarp = $('<div class="my-swiper"></div>');
    44.         var domList = $('<ul class="my-swiper-list"></ul>');
    45.         var spotBtn = $('<div class="my-swiper-spots"></div>');
    46.         // 创建li与小圆点
    47.         var len = this.list.length;
    48.         for (var i = 0; i < len; i++) {
    49.             var oLi = $('<li class="my-swiper-item"></li>');
    50.             oLi.append(this.list[i]).appendTo(domList);
    51.             spotBtn.append($('<span></span>'));
    52.         }
    53.         // 判断是轮播方式是否为普通轮播，普通轮播需要多处一张图片辅助轮播
    54.         if (this.type === 'animation') {
    55.             domList.append($('<li class="my-swiper-item"></li>').append($(this.list[0]).clone(true)));
    56.         }
    57.         // 添加左右滚动按钮
    58.         var swiperLeftBtn = $('<div class="my-swiper-btn my-swiper-lbtn">&lt;</div>');
    59.         var swiperRightBtn = $('<div class="my-swiper-btn my-swiper-rbtn">&gt;</div>');
    60.         // 将结构添加进页面
    61.         swiperWarp.append(domList)
    62.             .append(swiperLeftBtn)
    63.             .append(swiperRightBtn)
    64.             .append(spotBtn)
    65.             .appendTo(this.warp)
    66.             .addClass("my-swiper-" + this.type);
    68.     }
    69.     /**
    70.      * 设置样式
    71.      */
    72.     Swiper.prototype.initStyle = function () {
    73.         var self  = this;
    74.         // 设置轮播区域的宽度与高度 普通轮播区域的ul的宽的需要多加一个li的宽度
    75.         $('.my-swiper', this.warp).css({
    76.             width: this.width,
    77.             height: this.height,
    78.         }).find('.my-swiper-list').css({
    79.             width: this.type === "animation" ? this.width * (this.listLen + 1) : this.width,
    80.         }).find('.my-swiper-item').css({
    81.             width: this.width,
    82.         });
    83.         // 设置淡入淡出轮播图样式
    84.         if (this.type === 'fade') {
    85.             $('.my-swiper > .my-swiper-list > .my-swiper-item', this.warp).css({
    86.                 display: 'none',
    87.             }).eq(this.nowIndex).css({
    88.                 display: 'block',
    89.             })
    90.         }
    91.         // 设置小圆点的样式
    92.         $('.my-swiper-spots', this.warp).css({
    93.             textAlign: this.spotPosition,
    94.             display: this.showSpotBtn ? 'block' : 'none',
    95.         }).find('span').eq(this.nowIndex).css({
    96.             backgroundColor: this.spotColor,
    97.         })
    98.         // 小圆点的尺寸
    99.         $('.my-swiper-spots > span' ,this.warp).css({
    100.             width:this.sportSize,
    101.             height:this.sportSize,
    102.         })
    103.         // 设置左右切换按钮的显示方式
    104.         if (this.showChangeBtn === 'always') {
    105.             $('.my-swiper > my-swiper-btn', this.warp).css({
    106.                 display: 'block',
    107.             })
    108.         } else if (this.showChangeBtn === 'hidden') {
    109.             $('.my-swiper > .my-swiper-btn', this.warp).css({
    110.                 display: 'none',
    111.             })
    113.         } else if (this.showChangeBtn === 'hover') {
    114.             $('.my-swiper > .my-swiper-btn', self.warp).css({
    115.                 display:'none',
    116.             })
    117.             $('.my-swiper', this.warp).hover(function () {
    118.                 $('.my-swiper > .my-swiper-btn', self.warp).css({
    119.                     display: 'block',
    120.                 })
    121.             }, function () {
    122.                 $('.my-swiper > .my-swiper-btn', self.warp).css({
    123.                     display: 'none',
    124.                 })
    126.             })
    127.         }
    128.     }
    129.     /**
    130.      * 设置事件
    131.      */
    132.     Swiper.prototype.bindEvent = function () {
    133.         // 左切换图片
    134.         var self = this;
    135.         $('.my-swiper-lbtn', this.warp).click(function () {
    136.             if (self.flag) {
    137.                 self.flag = false;
    138.             } else {
    139.                 return false;
    140.             }
    141.             // 判断是否为第一张
    142.             // clearInterval(this.timer)
    143.             if (self.nowIndex === 0) {
    144.                 // 判断是否为普通轮播
    145.                 if (self.type === 'animation') {
    146.                     $('.my-swiper-list', self.warp).css({
    147.                         left: -self.listLen * self.width,
    148.                     })
    149.                 }
    150.                 // 如果为淡入淡出 
    151.                 self.nowIndex = self.listLen - 1;
    153.             } else {
    154.                 self.nowIndex--;
    155.             }
    156.             self.swiperMove()
    157.         })
    158.         // 右切换图片
    159.         $('.my-swiper-rbtn', this.warp).click(function () {
    160.             if (self.flag) {
    161.                 self.flag = false;
    162.             } else {
    163.                 return false;
    164.             }
    165.             // 判断是否为普通轮播动画
    166.             // clearInterval(this.timer)
    167.             if (self.type === 'animation') {
    168.                 // 判断是否为最后一张图片
    169.                 if (self.nowIndex == self.listLen) {
    170.                     $('.my-swiper-list', self.warp).css({
    171.                         left: 0,
    172.                     })
    173.                     self.nowIndex = 1;
    174.                 } else {
    175.                     self.nowIndex++;
    176.                 }
    178.             } else {
    179.                 // 淡入淡动画
    180.                 if (self.nowIndex === self.listLen - 1) {
    181.                     self.nowIndex = 0;
    182.                 } else {
    183.                     self.nowIndex++;
    184.                 }
    185.             }
    186.             self.swiperMove()
    187.         })
    188.         // 鼠标移入时停止，鼠标移出时是否自动轮播
    189.         $('.my-swiper', this.warp).mouseenter(function () {
    190.             clearInterval(self.timer);
    191.         }).mouseleave(function () {
    192.             if (self.autoChange) {
    193.                 self.autoMove()
    194.             }
    195.         })
    197.         // 鼠标移入小圆点，播放其对应的图片
    198.         $('.my-swiper-spots > span').mouseenter(function () {
    199.             if (self.flag) {
    200.                 self.flag = false;
    201.             } else {
    202.                 return false;
    203.             }
    204.             self.nowIndex = $(this).index()
    205.             self.swiperMove()
    206.         })
    209.     }
    210.     /***
    211.      * 轮播动画
    212.      */
    213.     Swiper.prototype.swiperMove = function () {
    214.         var self = this;
    215.         // 判断是否为普通动画
    216.         if (this.type === 'animation') {
    217.             $('.my-swiper-list', self.warp).animate({
    218.                 left: -self.nowIndex * self.width,
    219.             }, function () {
    220.                 self.flag = true;
    221.             })
    223.         } else {
    224.             // 淡入淡出轮播动画
    225.             $('.my-swiper-list > .my-swiper-item', this.warp)
    226.                 .fadeOut()
    227.                 .eq(this.nowIndex)
    228.                 .fadeIn(function () {
    229.                     self.flag = true;
    230.                 })
    232.         }
    234.         // 切换小圆点
    235.         $('.my-swiper-spots > span', this.warp).css({
    236.             backgroundColor: "#ccc",
    237.         }).eq(this.nowIndex % this.listLen).css({
    238.             backgroundColor: this.spotColor,
    239.         })
    240.     }
    241.     // 自动轮播
    242.     Swiper.prototype.autoMove = function () {
    243.         var self = this;
    244.         clearInterval(this.timer);
    245.         if (this.autoChange) {
    246.             this.timer = setInterval(function () {
    247.                 $('.my-swiper > .my-swiper-rbtn', self.warp).trigger('click');
    248.             }, this.autoTime)
    249.         }
    251.     }
    252.     $.fn.extend({
    253.         swiper: function (option) {
    254.             var obj = new Swiper(option, this);
    255.             obj.init()
    256.         }
    257.     })
    259. }($ || jQuery))

    调用方式

    1. $('.swiper-1').swiper({
    2.     list:$('.focus-item-img'), //需要轮播的图片
    3.     width: 590,
    4.     height: 470,
    5.     type: 'fade',
    6.     autoChange: true,
    7.     autoTime: 3000, 
    8.     showChangeBtn: 'always', 
    9.     showSpotBtn: true, 
    10.     spotPosition: 'left', 
    11.     spotColor: 'red',
    12. })

    html结构为

    1.                     <div class="swiper-1">
    2.                         <img class="focus-item-img"
    3.                             src="http://imgcps.jd.com/ling4/100010617232/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa1b/b06140e4/cr/s/q.jpg">
    4.                         <img class="focus-item-img"
    5.                             src="http://img20.360buyimg.com/pop/s590x470_jfs/t1/116840/9/15280/74505/5f3cf320Eebd6a908/7b799f81542a23ec.jpg.webp">
    6.                         <img class="focus-item-img"
    7.                             src="http://img13.360buyimg.com/pop/s590x470_jfs/t1/135367/9/7234/100878/5f3ba809E1b202a8b/81b0be8389b4089a.jpg.webp">
    8.                         <img class="focus-item-img"
    9.                             src="http://img11.360buyimg.com/pop/s590x470_jfs/t1/118356/11/11706/83497/5f0298b3Ee6ef2cc4/c512647552ff81ef.jpg.webp">
    10.                     </div>