JQuery轮播图（requireJS）

   按代码顺序写的注释，主要是carousel.js文件 
 

   <script src="../require.js" data-main="index"></script> 
 

 
  在html文件中先引入require文件，并加载index页面级js文件 
 

（自己找一个require文件，我没附链接）

 
  index.js：require(['carousel'],function(Carousel){内容} 
 

 
  引用carousel.js文件，传参数 
 

 
  var carousel1=new Carousel(); new一个对象，调用方法，传参数 
 

 
  carousel.js：define(['jquery'], function ($) {内容} 
 

 
  定义函数，引用Jquery语法 
 

 
  function一个Carousel类，生成html标签元素定义其为自定义属性 
 

 
  return Carousel;一定要返回暴露，index.js文件才能用 
 

 
  在类prototype原型下定义init方法，传参option（有一部分默认值） 
 

 
  Carousel.prototype.init = function (option){} 
 

 
  option = $.extend(this.default, option);//重复的覆盖 不重复的默认 
 

 
  this.$prev.addClass('carousel-prev-' + option.btnPos); 
 

 
  this.$next.addClass('carousel-next-' + option.btnPos);//方法.属性=值 
 

 
  以上语句修改前后箭头按钮样式（bottom或center），添加class显示前后箭头样式 
 

 
  （ 
  样式之前都设置好了 
  ，添加class就好， 
  字符串拼接内容为该属性的值 
  ，组合形成class） 
 

 
  for (var i = 0; i < option.imgData.length; i++) { 
 

 
   this.$tab.append(`<li class="${i == 0 ? 'selected ' + option.buttonType : option.buttonType}">${i + 1}</li>`); 
 

 
   this.$imgBox.append(`<img class="${i == 0 ? 'selected' : ''}" src="${option.imgData[i]}" alt="">`) 
 

}

 
  循环插入的图片，图片和1234按钮对应 
 

 
  初始显示索引为0的图片，1234按钮索引为0的显示特殊样式 
 

 
  三元表达式： 
 

 
  1234按钮：如果索引为0，就添加selected（background:orange）和传进来的值（circle或square， 
  事先设置这个值的同名class样式 
  ）作为class，修改1234按钮样式 
 

 
  图片：如果图片索引为0，添加selected（display:block）为class，否则不添加class（所有图片设置样式display:none） 
 

 
  this.$container.append(this.$imgBox).append(this.$tab).append(this.$prev).append(this.$next); 
 

 
  $(option.selector).append(this.$container); 
 

 
  内容拼接，this.$tab、this.$prev、this.$next一定在插入图片后插入，可以在图片上面显示 
 

 
  option.selector（传参）是写在html中的div，把所有内容插入到这个div中 
 

 
  var _this=this; 
 

 
  var iNow=0; 
 

 
  初始时设置，this另存起来以便于和别的事件中this区分 
 

 
  iNow记录当前索引，初始为0 
 

 
  $('li',this.$tab).on('click',function () { 
 

 
   iNow=$(this).index(); 
 

 
   change($(this).index()); 
 

});

 
  $('li',this.$tab)代表this.$tab下的li 
 

 
  1234按钮点击事件，点击时记录当前索引，并且调用change函数传参（当前索引） 
 

 
  function change(idx) { 
 

 
   $('li',_this.$tab).eq(idx).addClass('selected').siblings().removeClass('selected'); 
 

 
   $('img',_this.$imgBox).eq(idx).addClass('selected').siblings().removeClass('selected'); 
 

}

 
  核心change函数改变图片及1234按钮，根据传进来的索引找到数组中对应内容，添加class，显示对应图片和按钮，移除兄弟class 
 

 
  this.$next.on('click',function () { 
 

 
   iNow++; 
 

 
   if(iNow==option.imgData.length){ 
 

 
   iNow=0; 
 

}

 
   change(iNow); 
 

});

 
  下一个图片点击事件，根据上面存储的图片的iNow，进行++（就是加1），如果++后的iNow等于图片数组的长度（证明这是最后一张图片，数组索引0开始，长度减去1是最大索引），设置iNow=0（第一张图片索引），调用change函数，参数为iNow 
 

 
  上一个同理 
 

 
  function run(){ 
 

 
   _this.timer = setInterval(function(){//自定义属性 
 

 
   _this.$next.trigger('click'); 
 

 
   },option.speed); 
 

}

 
  run(); 
 

 
  this.$container.hover(function(){ 
 

 
   clearInterval(_this.timer); 
 

 
  },function(){ 
 

 
   run(); 
 

});

 
  定时器，自动播放轮播图，传参数作为速度option.speed，_this.$next.trigger('click');触发下一个的点击事件，一直下一个实现轮播（注意是_this） 
 

 
  把定时器封装在run函数中，run()调用，当鼠标滑入容器时清除定时器，滑出继续播放 
 

 
  （hover在Jquery中代表滑入和滑出） 
 

carousel.js

define(['jquery'], function ($) {
    function Carousel() {
        this.$container = $('<div class="carousel-container"></div>');
        this.$imgBox = $('<div class="carousel-img-box"></div>');
        this.$tab = $('<ul class="carousel-tab"></ul>');
        this.$prev = $('<div class="arrows carousel-prev-bottom"><</div>');
        this.$next = $('<div class="arrows carousel-next-bottom">></div>');
    }

    Carousel.prototype.init = function (option) {
        var _this=this;
        var iNow=0;
        this.default = {
            buttonType: 'square',//circle square
            btnPos: 'bottom', //center bottom
            speed: '1000'
        };

        option = $.extend(this.default, option);//重复的覆盖 不重复的默认
        for (var i = 0; i < option.imgData.length; i++) {
            this.$tab.append(`<li class="${i == 0 ? 'selected ' + option.buttonType : option.buttonType}">${i + 1}</li>`);
            this.$imgBox.append(`<img class="${i == 0 ? 'selected' : ''}" src="${option.imgData[i]}" alt="">`)
        }

        this.$prev.addClass('carousel-prev-' + option.btnPos);
        this.$next.addClass('carousel-next-' + option.btnPos);
        this.$container.append(this.$imgBox).append(this.$tab).append(this.$prev).append(this.$next);
        $(option.selector).append(this.$container);

        $('li',this.$tab).on('click',function () {
            iNow=$(this).index();
            change($(this).index());
        });
        function change(idx) {
            $('li',_this.$tab).eq(idx).addClass('selected').siblings().removeClass('selected');
            $('img',_this.$imgBox).eq(idx).addClass('selected').siblings().removeClass('selected');
        }
        this.$next.on('click',function () {
            iNow++;
            if(iNow==option.imgData.length){
                iNow=0;
            }
            change(iNow);
        });
        this.$prev.on('click',function () {
            iNow--;
            if(iNow==-1){
                iNow=option.imgData.length-1;
            }
            change(iNow);
        });

        function run(){
            _this.timer = setInterval(function(){//自定义属性
                _this.$next.trigger('click');
            },option.speed);
        }
        run();
        this.$container.hover(function(){
            clearInterval(_this.timer);
        },function(){
            run();
        });
    };
    return Carousel;
});

index.js

require(['carousel'],function(Carousel){
    var carousel1=new Carousel();
    carousel1.init({
        buttonType:'circle',
        btnPos:'center',
        selector:'#content1',
        imgData:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
    });
    var carousel2=new Carousel();//两个轮播图，互不影响
    carousel2.init({
        buttonType:'square',
        btnPos:'bottom',
        selector:'#content2',
        imgData:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
    });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css"/>
    <script src="../require.js" data-main="index"></script>
</head>
<body>
<div id="content1">
   <!-- <div class="carousel-container">//初始构想的页面布局
        <div class="carousel-img-box">
            <img class="selected" src="img/1.jpg" alt=""/>
            <img src="img/2.jpg" alt=""/>
            <img src="img/3.jpg" alt=""/>
            <img src="img/4.jpg" alt=""/>
        </div>
        <ul class="carousel-tab">
            <li class=" selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <span class="arrows carousel-prev-bottom"><</span>
        <span class="arrows carousel-next-bottom">></span>
    </div>-->
</div>
<div id="content2">//两个轮播图
    
</div>
</body>
</html>

index.css

*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
.carousel-container{
    width: 680px;
    height: 344px;
    position: relative;
    margin: 0 auto;
}
.carousel-img-box img{
    display: none;
    position: absolute;
    left:0;
    top:0;
}
.carousel-img-box img.selected{
    display: block;
}
.carousel-tab{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.carousel-tab li,.arrows{
    width: 20px;
    height: 20px;
    background: #000000;
    color: #fff;
    text-align: center;
    line-height: 20px;
    float: left;
    margin-right: 5px;
    cursor: pointer;
}
.carousel-tab li.circle{
    border-radius: 50%;
}
.carousel-tab li.square{
    border-radius: 0;
}
.carousel-tab li.selected{
    background: orange;
}

.carousel-prev-bottom{
    position: absolute;
    left: 10px;
    bottom: 10px;
}
.carousel-next-bottom{
    position: absolute;
    left: 35px;
    bottom: 10px;
}

.carousel-prev-center{
    left: 10px;
    top:50%;
    margin-top: -10px;
    position: absolute;
}
.carousel-next-center{
    position: absolute;
    left:650px;
    top:50%;
    margin-top: -10px;
}

点击打开链接

JQuery轮播图（requireJS）

猜你喜欢