常见轮播图

端开发中基本上每个项目都会用到轮播图，今天我们就对常见轮播图的实现原理好好分析一下。

1，普通的渐隐渐现式轮播图

html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-inner" id="swiper-inner">
            <img src="img/5.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
        </div>
        <div class="swiper-dots"></div>
        <div class="pre" id="pre"></div>
        <div class="next" id="next"></div>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/swiper.js"></script>
        <script>
        new Swiper({
            el: $('#swiper-inner'),
        });
        </script>
</body>

</html>

css部分：main.css

html,
body {
    padding: 0px;
    margin: 0px;
}

.swiper-container {
    position: relative;
    width: 1125px;
    height: 352px;
    margin: 0 auto;
    overflow: hidden;
}

.swiper-inner {
    height: 100%;
    background-color: #e6e6e6;
    text-align: center;
}

.swiper-inner img {
    display: none;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.swiper-dots {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: -40px;
    text-align: center;
    list-style: none;
}

.swiper-dots span {
    display: inline-block;
    width: 40px;
    height: 6px;
    background: #607D8B;
    margin-left: 5px;
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: pointer;
}

.swiper-dots .active {
    opacity: 1;
    filter: alpha(opacity=100);
}

.pre,
.next {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 70px;
    margin-top: -24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1) url(../img/icon-slides.png) -83px 0px no-repeat;
    cursor: pointer;
}

.pre {
    left: 30px;
}

.pre:hover {
    background: url(../img/icon-slides.png) 0px 0px no-repeat;
}

.next {
    right: 30px;
    background-position: -122px 0;
}

.next:hover {
    background-position: -41px 0;
}

js部分：swiper.js

  (function(factory) {
     if (typeof define === 'function' && define.amd) {
         define(['jquery'], factory($));
     } else if (typeof module !== 'undefined') {
         module.exports = factory();
     } else {
         window.Swiper = factory();
     }
 })(function() {
     function Swiper(option) {
         option = option || {};
         this.el = option.el;
         this.timer = option.timer || 3000; //自动切换时间
         if (option.autoplay === 'undefined' || option.autoplay === false) {
             this.autoplay = false;
         } else {
             this.autoplay = true;
         }
         this.$img = this.el.find('img');
         this.len = this.$img.length;

         this.c = 0; //当前显示的图片位置
         if (this.$img.length > 0) {
             this.initialize();
         }
     }

     Swiper.prototype.initialize = function() {
         this.baseInit();
         //初始化dom
         this.domInit();
         //自动播放
         if(this.autoplay)this.autoRun();
         //初始化事件
         this.initEvent();
     }
     //初始化swiper-inner行高和.dot
     Swiper.prototype.baseInit = function() {
         //设置swiper-inner行高
         $('.swiper-inner').css('line-height', $('.swiper-container').height() + 'px');

         //初始化dots
         var dotSpan = '';
         var dotlen = this.len;
         while (dotlen > 0) {
             if (dotlen === 1) {
                 dotSpan += '<span class="dot active"></span>';
             } else {
                 dotSpan += '<span class="dot"></span>';
             }
             dotlen--;
         }
         this.$swiperDots = $('.swiper-dots');
         this.$swiperDots.html(dotSpan);
         this.$dotSpans = this.$swiperDots.find('.dot');

         //显示第一张图片
         this.$img.eq(0).fadeIn(300);
     }
     //显示当前图片
     Swiper.prototype.domInit = function() {
         this.$img.eq(this.c).fadeIn(300).siblings().fadeOut(300);
         this.$dotSpans.eq(this.c).addClass('active').siblings().removeClass('active');
     }
     //定时器
     Swiper.prototype.autoRun = function(c) {
         if (this.timmer) clearInterval(this.timmer);
         this.timmer = setInterval(function() {
             this.c++;
             this.c = this.c >= this.len ? 0 : this.c;
             this.domInit();
         }.bind(this), this.timer);
     }
     //事件
     Swiper.prototype.initEvent = function() {
         //鼠标移入时取消自动播放，离开时继续自动播放
         this.el.mouseenter(function() {
             clearInterval(this.timmer);
         }.bind(this));
         this.el.mouseleave(function() {
             this.autoRun();
         }.bind(this));
         //鼠标移入到$dotSpans上，取消自动播放，显示对应的图片
         this.$dotSpans.mouseenter(function(e) {
             clearInterval(this.timmer);
             this.c = $(e.target).index();
             this.domInit();
         }.bind(this));
         //上一张
         $('#pre,#next').mouseenter(function() {
             clearInterval(this.timmer);
         }.bind(this));
         $('#pre').click(function() {
             this.c--;
             this.c = this.c < 0 ? this.len - 1 : this.c;
             this.domInit();
             clearInterval(this.timmer);
         }.bind(this));
         $('#next').click(function() {
             this.c++;
             this.c = this.c >= this.len ? 0 : this.c;
             this.domInit();
             clearInterval(this.timmer);
         }.bind(this));
     }

     return Swiper;
 });

yuyongkun4519

发布了54 篇原创文章 · 获赞 0 · 访问量 7716

私信关注

猜你喜欢