轮播图效果

Posted 2021-09-01 AYC_Baizhaoming

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 构造网页结构布局
• 运用css，html合理实现布局
• 运用jquery实现网页动态效果以及交互作用
  • 1.引入jquery的js库
  • 2.运用js基础加上jquery框架来实现效果
• 保持清醒的开发逻辑，以及严谨的编码态度，可以帮助我们减少bug的发生，和一些不必要的问题发生，从而提高开发效率及质量。

---

前言

随着网页的前端布局框架的多元化，我们所实现的网页，也随着发展，不断进步，今天我们先讲一个轮播图的案列，从这个轮播图案例中实现我们想要得到的效果

---

一、构造网页布局？

设计网页的第一步，要求能够大致推算出我们需要什么样的布局从而能够得到我们所需要的效果，

然后运用html，css来实现我们初步在网页中的效果呈现。

以下是参考的css 样式

  /* 轮播图容器 */
        .lunbo {
            width: 800px;
            height: 350px;
            margin: 20px auto;
            /* 相对定位 */
            position: relative;
        }

        /* 轮播图图图片 */
        .lunbo img {
            width: 800px;
            height: 350px;
        }

        /* 小按钮 */
        .dot {
            /* 绝对定位 */
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
        }

        .dot li {
            width: 8px;
            height: 8px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        .dot li.active {
            background-color: tomato;
        }

        /* 箭头 */
        .arrow {
            width: 50px;
            height: 80px;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            color: #666;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            cursor: pointer;
        }

        .arrow:hover {
            background-color: rgba(173, 216, 230, 0.5);
        }

        .left {
            left: 10px;
        }

        .right {
            right: 10px;
        }

以下是参考的html样式

 <div class="lunbo">
        <img class="img" src="">
        <ul class="dot flex j-c">
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <div class="left arrow">&lt;</div>
        <div class="right arrow">&gt;</div>
</div>

二、使用步骤

1.引入jquery库

代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.编写jquery代码：

代码如下（示例）：

   //定义图片数组

        let imgs = [
            "http://p1.music.126.net/bYpz2EzQtOxLSsKdYFKLlg==/109951166108416305.jpg?imageView&quality=89",
            "http://p1.music.126.net/w5nRr9khPUar7ooD6t-17A==/109951166106560685.jpg?imageView&quality=89",
            "http://p1.music.126.net/PbJe6QR4zDysvMgKJ8VYgQ==/109951166106325434.jpg?imageView&quality=89",
            "http://p1.music.126.net/FrA3j1mgvAmelemjZy3ssw==/109951166107492401.jpg?imageView&quality=89",
            "http://p1.music.126.net/8pnqro4k5TCKE7ZZtnWiuQ==/109951166107492177.jpg?imageView&quality=89",
            "http://p1.music.126.net/ZjnFalihrdOh-nrxxb3yNA==/109951166108228282.jpg?imageView&quality=89"
        ]
         //定义数组下标
        let index = 0
        //获取图片对象
        let $img = $('.img')
        //默认显示第一张图片
        $img.attr('src', imgs[0])
       

        //给图片注册鼠标进入事件
        $('.lunbo').mouseenter(function () {
            //清空定时器
            clearInterval(timer)
        })
        //给图片注册鼠标移除事件
        $('.lunbo').mouseleave(function () {
            //重新开启定时器
            run()
        })

        //左箭头点击事件
        $('.left').click(function(){
            if(--index<0) index = imgs.length-1
            //调用切换方法
            change()
        })
        //右箭头点击事件
        $('.right').click(function(){
            if(++index===imgs.length)index = 0
            //调用切换方法
            change()
        })


        //创建点的方法
        function createDot() {
            for (let i = 0; i < imgs.length; i++) {
                //创建点按钮
                let $li = $('<li>')
                //给点按钮注册点击事件
                $li.click(function () {
                    //设置显示的下标
                    index = $(this).index()

                    //调用切换方法
                    change()

                })
                //将点按钮添加到ul中
                $('.dot').append($li)
            }
            //默认第一个点的高亮效果
            $('.dot li').eq(index).addClass('active')
        }
        //调用创建点的方法
        createDot()

        //图片的轮播方法
        let timer = null //定义定时器变量，用于控制定时器
        function run() {
            timer = setInterval(() => {
                //更新数组的下标，如果下标超过数组长度，则重新归零
                if (++index >= imgs.length) index = 0
                //调用切换方法
                change()
            }, 3000);
        }
        //切换方法
        function change() {
            //根据最新的下标，显示图片
            $img.attr('src', imgs[index])
            //切换点的高亮效果
            $('.dot li').eq(index).addClass('active').siblings('.active').removeClass('active')
        }
        //调用轮播方法
        run()

1定义图片数组

2初始化定义第一张显示的图片

3运用定时器以及鼠标事件的方法控制图片轮播的效果

---

总结

这个案例要求我们熟练掌握运动js的鼠标各种常用事件，以及合理运用定时器方法，以及熟练使用jquery的语法格式与js相结合。
以上就是今天要讲的内容，本文简单介绍了jquery的部分使用，而jquery框架提供了大量能处理数据的函数和方法。