实现banner模块
来源:互联网 发布:逗猫软件 编辑:程序博客网 时间:2024/06/10 01:21
网站基本都会有一个banner模块,展示各种内容,大致长下面这样:
从图中可以得知该模块由“一组可点击的图片”和“两个按钮”组成,图片组可以放在一个ul列表中,并用div容器存放,两个按钮应该和图片组并列放在div容器中,所以整体的html结构如下:
<body> <div><!-- div容器 --> <ul> <li><a href="#"><img src="images/1.jpg"></a></li> <li><a href="#"><img src="images/2.jpg"></a></li> <li><a href="#"><img src="images/3.jpg"></a></li> <li><a href="#"><img src="images/4.jpg"></a></li> <li><a href="#"><img src="images/5.jpg"></a></li> </ul> <div class="prev-btn"></div><!-- 向左按钮 --> <div class="next-btn"></div><!-- 向右按钮 --> </div></body>
为了让模板不死板,我们可以给div容器添加一个配置属性data-setting,通过设置该属性的值(键值对)来确定模块的一些参数值,例如模块的宽度、高度、与最面图片的缩放比例、对齐方式等等。可以在构造函数中设置以上参数值的默认值。
整个模块的实现采用面向对象的方法,主要是要先定好最上面那张图的位置,然后剩余图片的位置以最上面图片为参考。js实现主要为以下几部分:
一:首先可以设置一个默认的配置参数对象setting;
二:然后获取前面传过来的配置参数data-setting,用jQuery的扩展对象方法extend()去扩展setting对象;
三:根据setting中的参数值去控制整个模块的宽高,最上面图片的宽高、位置及层次,左右按钮的宽高及层次;
四:以最上面图片为参考设置左右两边图片的大小、位置、透明度及层次;
五:当所有图片位置关系确定好了之后,接下来要实现的就是点击按钮时切换图片,切换图片时应该记录当前图片的上一图片或下一图片的参数,然后用动画进行过渡过去;
六:最后给整个模块添加一个自动旋转的功能。
具体的实现放在了github上:https://github.com/DreamFJ/JavascriptDemo/tree/master/banner
慕课网上有视频讲解,挺不错的一个网站。
0 0
- 实现banner模块
- Banner实现
- Android广告Banner实现
- banner轮播图的实现
- appframework实现Banner轮播图
- Banner实现轮播
- android banner 实现轮播图
- Banner 简单实现轮播图
- Banner实现无限轮播图
- 安卓banner实现
- 实现Banner,TabLayout,XlistView
- Banner轮播图简单实现
- Banner的简单实现
- Android Banner 简单实现
- banner实现图片轮播
- 用JQuery实现全屏banner
- 实现简单的banner变换
- js 实现banner轮播
- 一段代码
- 167. Two Sum II
- openssl 资料
- 教你用Netstat-实践案例
- Largest Submatrix of All 1’s----单调栈
- 实现banner模块
- rm命令
- 树莓派系列二(语音识别)
- Handlers 页面静态化
- cocos2d
- 使用ambari启动Spark Thrift Server时报错:bad substitution
- IDEA 搭建Maven环境
- 自定制视频播放器
- HDU2059&&FZU1889-龟兔赛跑