封装一个简单的banner轮播插件

最新推荐文章于 2022-06-20 07:00:00 发布

玉林君

最新推荐文章于 2022-06-20 07:00:00 发布

阅读量398

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0; font-family: '微软雅黑'; }
a { text-decoration: none; }
ul, ol, dl { list-style-type: none; }
img { border: none; }
input, button, a, img { outline: none; }
html { height: 100%; }
body { height: 100%; }

.banner-box { width: 100%; margin: 0px auto; overflow: hidden; position: relative; }
.banner-box .list { width: 1000%; overflow: hidden; position: relative; left: 0; top: 0; }
.banner-box .list li { width: 10%; float: left; overflow: hidden; }
.banner-box .list li:first-child { display: block; }
.banner-box .list li a img { width: 100%; display: block; }
.banner-box .prev,
.banner-box .next { position: absolute; width: 100px; height: 100px; font-size: 50px; line-height: 100px; background-color: rgba(0, 0, 0, 0.4); top: 50%; margin-top: -50px; color: #ffffff; text-align: center; cursor: pointer; }
.banner-box .prev:hover,
.banner-box .next:hover { background-color: rgba(0, 0, 0, 0.6); }
.banner-box .prev { left: 0; }
.banner-box .next { right: 0; }
.banner-box .banner-pages { position: absolute; bottom: 20px; height: 20px; width: 100%; text-align: center; font-size: 0; }
.banner-box .banner-pages span { width: 20px; height: 20px; background-color: #cccccc; display: inline-block; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; position: relative; cursor: pointer; margin: 0 6px; line-height: 30px; text-align: center; z-index: 1; font-size: 0px; }
.banner-box .banner-pages span.on { background-color: #f99c38; color: #ffffff; }
</style>
</head>
<body>
<div class="banner-box">
<ul class="list">
<li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner1.jpg" alt="index_banner1.jpg"></a></li>
<li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner2.jpg" alt="index_banner2.jpg"></a></li>
<li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner3.jpg" alt="index_banner3.jpg"></a></li>
<li><a href="javascript:;"><img src="http://www.loushengyue.com/myself/img/index_banner4.jpg" alt="index_banner4.jpg"></a></li>
</ul>
<div class="prev"><</div>
<div class="next">></div>
<div class="banner-pages">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script>
;(function (win, $) {
var banner = function (obj) {
this.bannerBox = $(obj);
this.listBox = this.bannerBox.find('.list');
this.list = this.bannerBox.find('.list li');
this.prevBtn = this.bannerBox.find('.prev');
this.nextBtn = this.bannerBox.find('.next');
this.pages = this.bannerBox.find('.banner-pages span');
this.index = 0;
this.len = this.list.length;
this.timer = null;
this.isClicked = false;
this.cloneOneToLast = this.list.eq(0).clone();
this.cloneOneToLast.appendTo(this.listBox);
this.nextBtnClickEvent();
this.prevBtnClickEvent();
this.pagesClickEvent();
this.bannerBoxHoverEvent();
this.autoPlay();
};
$.extend(true, banner.prototype, {
runByIndex: function () {
var _this = this;
this.pages.removeClass('on');
if (this.index == this.len || this.index == 0) {
this.pages.eq(0).addClass('on')
} else {
this.pages.eq(this.index).addClass('on');
}
this.listBox.animate({left: -this.index * 100 + '%'}, 500, function () {
_this.isClicked = false;
});
},
autoPlay: function () {
var _this = this;
_this.stopRun();
_this.timer = setInterval(function () {
_this.nextRun();
}, 3000);
},
stopRun: function () {
if (this.timer) {
win.clearInterval(this.timer);
}
},
nextRun: function () {
if (this.index > this.len - 1) {
this.index = 0;
this.listBox.css('left', -this.index * 100 + '%');
}
this.index++;
this.runByIndex();
},
prevRun: function () {
if (this.index < 1) {
this.index = this.len;
this.listBox.css('left', -this.index * 100 + '%');
}
this.index--;
this.runByIndex();
},
bannerBoxHoverEvent: function () {
var _this = this;
_this.bannerBox.hover(function () {
_this.stopRun();
}, function () {
_this.autoPlay();
});
},
pagesClickEvent: function () {
var _this = this;
_this.pages.click(function () {
if (!_this.isClicked) {
_this.index = $(this).index();
_this.runByIndex();
}
});
},
prevBtnClickEvent: function () {
var _this = this;
_this.prevBtn.click(function () {
if (!_this.isClicked) {
_this.isClicked = true;
_this.prevRun();
}
});
},
nextBtnClickEvent: function () {
var _this = this;
_this.nextBtn.click(function () {
if (!_this.isClicked) {
_this.isClicked = true;
_this.nextRun();
}
});
}
});
banner.init = function (obj) {
for (var i = 0, len = obj.length; i < len; i++) {
new this(obj[i]);
}
};
win.MySelfBanner = banner;
})(window, $);

//实例化插件
MySelfBanner.init($('.banner-box'));
</script>
</body>
</html>