实现banner模块

最新推荐文章于 2024-08-08 07:45:15 发布

jojo付啾啾

最新推荐文章于 2024-08-08 07:45:15 发布

阅读量2.4k

点赞数 2

分类专栏： demo 文章标签： js banner滚动效果

本文链接：https://blog.csdn.net/DreamFJ/article/details/69950175

版权

demo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网站基本都会有一个banner模块，展示各种内容，大致长下面这样：

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

慕课网上有视频讲解，挺不错的一个网站。