按代码顺序写的注释,主要是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; }