封装一个简单的banner轮播插件
来源：互联网 发布：景观大数据百度云盘 编辑：程序博客网 时间：2024/05/18 00:13
一般普通企业网站都有一个首页轮播，为了实现这个功能，我们可以引用第三方插件（比如：swiper）；当然，我们更感兴趣的是如何自己封装一个简单的轮播插件
废话少说，直接上码：
<!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>阅读全文
0 0
- 封装一个简单的banner轮播插件
- 简单的Banner轮播展示
- 无限轮播的Banner简单方法
- banner轮播的简单实现
- banner的轮播
- banner 简单的实现无线轮播的控件
- 简单三步实现banner的轮播效果
- Banner的简单使用（实现轮播效果）
- banner的简单无线轮播加载示例
- 封装轮播插件
- 一个简单的banner
- 一个简单的jquery图片轮播插件
- 一个简单实用的jquery轮播插件
- Banner条的轮播
- banner自动轮播的简单实现
- 轮播Banner使用简单集成
- 封装一个轮播
- 广告栏(自动轮播,无限循环)-图片轮播控件Banner的简单使用总结
- linux httpd功能配置之虚拟主机
- 队列
- 20170710
- 逻辑斯蒂回归模型
- 2017.12.17Day18
- 封装一个简单的banner轮播插件
- CerberOS:
- 【练习作业】HBase与Hive操作
- Sigmetrix.GD&T.Advisor.V2.3.1.For.Creo.1.0-3.0 CETOL.v8.1.for.WILDFIRE2.0-3.0 Proe公差分析软件
- @ResrController与@Controller的区别
- 482. License Key Formatting
- phpcms 常用类
- 异常处理
- Python（7）实现一个简单的购物车逻辑
