正文
轮播图js编写
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
function Banner() {
var self = this;
self.countLi = $('.banner-group .bannerUl li').length;
self.bannerUl = $('.banner-group .bannerUl');
self.bannerGroup = $('.banner-group');
self.arrow = $('.arrow');
self.leftarrow = $('.arrow-left');
self.rightarrow = $('.arrow-right');
self.bannerControl = $('.bannerControl');
self.index = 1;
} Banner.prototype.animate = function(){
var self = this;
self.bannerUl.animate({'left':-798*self.index},500);
var index = self.index;
if (index===0){
index = self.countLi-1;
}else if(index === self.countLi+1){
index = 0
}else {
index = self.index-1;
}
self.bannerControl.children('li').eq(index).css('background-color','white').siblings('li').css('background-color','');
}; //初始化小圆点
Banner.prototype.bannerInit = function () {
var self = this;
self.bannerUl.css({'left':-798});
self.bannerUl.css('width',798*(self.countLi+2));
self.bannerControl.css('width',12*self.countLi+20*self.countLi);
for (i=0;i<self.countLi;i++){
var cirle = $('<li></li>');
self.bannerControl.append(cirle);
if(i===0){
self.bannerControl.children('li').eq(0).css('background-color','white');
}
}
var first = self.bannerUl.children('li').eq(0).clone();
var last = self.bannerUl.children('li').eq(self.countLi-1).clone();
self.bannerUl.append(first);
self.bannerUl.prepend(last);
}; //实现轮播图自动轮播
Banner.prototype.loop = function() {
var self = this;
self.timer = setInterval(function () {
if (self.index>=self.countLi+1){
self.bannerUl.css({'left':-798});
self.index=2;
}else {
self.index++;
}
self.animate();
},1000);
}; // 监听鼠标是否在轮播图上面
Banner.prototype.listenHover = function(){
var self = this;
self.bannerGroup.hover(function () {
clearInterval(self.timer);
self.listenArrow(true);
}, function () {
self.loop();
self.listenArrow(false);
})
}; //监听箭头隐藏事件
Banner.prototype.listenArrow = function(isshow){
var self = this;
if (isshow){
self.arrow.show();
}else {
self.arrow.hide();
}
};
//监听箭头点击事件
Banner.prototype.clickArrow = function () {
var self = this;
self.rightarrow.click(function () {
if(self.index>=self.countLi+1){
self.bannerUl.css({'left':-798});
self.index=2;
}else {
self.index++;
}
self.animate();
});
self.leftarrow.click(function () {
if(self.index===0){
self.bannerUl.css({'left':-self.countLi*798});
self.index = self.countLi-1;
}else {
self.index--
}
self.animate();
})
}; //小圆点控制轮播图
// Banner.prototype.bannerControlUl = function(){
// var self = this;
// self.bannerControl.children('li').eq(self.index+1).css('background-color','white').siblings('li').css('background-color','');
// }; //小圆点点击事件
Banner.prototype.clickControl = function () {
var self = this;
self.bannerControl.children('li').each(function (index,obj) {
$(obj).click(function () {
self.animate();
self.bannerControl.children('li').eq(index).css('background-color','white').siblings('li').css('background-color','');
})
})
}; Banner.prototype.run = function () {
var self = this;
self.loop();
self.listenArrow(false);
self.listenHover();
self.clickArrow();
self.bannerInit();
self.clickControl();
};
$(function () {
var banner = new Banner();
banner.run();
});