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 squarebtnPos: 'bottom', //center bottomspeed: '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;
}

点击打开链接