Jquery实现简单轮播图效果

最新推荐文章于 2024-08-27 19:30:26 发布

花花花菜

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量458

点赞数 1

分类专栏：前端文章标签： jquery css

本文链接：https://blog.csdn.net/m0_59075169/article/details/125859113

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用Jquery实现一个简单的轮播图效果，包括CSS样式设置、HTML结构以及Jquery代码实现。轮播图包含图片切换、左右箭头控制、小圆点指示器等功能，鼠标悬停时显示控制按钮，离开时隐藏，并设置了自动切换的定时器。

摘要由CSDN通过智能技术生成

Jquery实现简单轮播图效果

效果展示

在这里插入图片描述

css部分：

 <style>
        /* 除默认样式 */
        
        * {
            margin: 0px;
            padding: 0px;
        }
        
        li {
            list-style: none;
        }
        img{
            width: 720px;
            height: 450px;
        }
        .bigbox {
            cursor: pointer;
            overflow: hidden;
            position: relative;
            width: 720px;
            height: 450px;
            background-color: pink;
            margin: 150px auto;
        }
        /* 设置盒子的宽度，，让其在页面中间的位置显示，并且增加绝对定位， */
        /* 为后面左右箭头的设置铺垫 */
        /* 左右箭头设置绝对定位，子绝父相*/
        .bigbox ul {
            position: absolute;
            left: 0px;
            width: 5000px;
            height: 455px;
        }
        /* 给ul中的宽度设置的宽一些 */
        /* ，因为我们刚开始为了方便观看要将多个图片在一行显示 */
        
        .bigbox ul li {
            width: 720px;
            float: left;
        }
        /* 让每一个li浮动，并且设置宽度和大盒子bigbox一样宽 */
        
        .bigbox .dianji li {
            display: none;
            z-index: 99;
            cursor: pointer;
            position: absolute;
            top: 200px;
            width: 25px;
            height: 35px;
            color: #fff;
            line-height: 35px;
            text-align: center;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, .4);
        }
        /* 注意我们要给左右两个点击事件增加绝对定位， */
        /* 然后给他们的父级元素增加相对定位，来实现位置的设置 */
        
        .bigbox .left {
            left: 0px;
        }
        
        .bigbox .right {
            right: 0px;
        }
        /* 设置两个切换按钮的位置 */
       /* 注意他们两个相同的一些属性我放在了一起集中统一写了*/
        .bigbox ol {
            position: absolute;
            bottom: 30px;
            left: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 35px;
            border-radius: 5px;
            background-color: rgba(0, 0, 0, .3);
        }
        /* 设置ol的位置，采用了flex布局来实现子元素的水平和垂直居中 */
        /* 同时也采用了绝对定位来设置位置 */
        
        .bigbox .current {
            background-color: #ff5000
        }
        
        .bigbox ol li {
            cursor: pointer;
            float: left;
            margin: 0px 3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;
        }
        /* 对ol中的li的设置，也就是对小圆点的设置 */
    </style>

html部分：

    <div class="bigbox">
        <div class="dianji">
            <li class="left">&lt;</li>
            <li class="right">
                &gt;
            </li>
        </div>
        <ul>
            <!-- 真正要轮播的只有这5张图片 -->
            <li>
                <img src="./img1.jpg" alt="">
            </li>
            <li>
                <img src="./img2.jpg" alt="">
            </li>
            <li>
                <img src="./img3.jpg" alt="">
            </li>
            <li>
                <img src="./img4.jpg" alt="">
            </li>
            <li>
                <img src="./img1.jpg" alt="">
            </li>
        </ul>
        <ol>
            <li class="current"></li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>

Jquery部分：

 <script src="../jquery.min.js"></script>
    <script>
        $(function() {
            var index = 0;
            // 建立图片的索引号
            var timer = null;
            //   建立一个定时器
            var option = $('.bigbox>ul>li').length;
            // 获取轮播的图片的长度
            var $li = $('<li><img src = "imagess3/gui.jpg" alt = ""</li>')
            $('.bigbox>ul').append($li);
            // 新建一个图片和第一张重复，追加到最后面
            var imgwidth = $('.bigbox ul li').width();
            //获取图片的宽度
            //当鼠标移入时两侧的箭头显现，移除时消失并且移入时定时器停止，移            除时定时器开启
            $(".bigbox").hover(function() {
                $(".dianji li").show();
                clearInterval(timer)
            }, function() {
                $(".dianji li").hide();
                go();

            })
            console.log(option);
     //设置定时器，并用go函数封装，实现函数的自动播放
            function go() {
                timer = setInterval(function() {
                    if (index < option) {
                        index++;
                        // 当索引号小于图片张数时，索引号加一
                        $(".bigbox ul").stop().animate({
                            left: -imgwidth * index + 'px'
                        })
                    }
                    if (index == option) {
                        $(".bigbox ul").stop().animate({
                                left: -imgwidth * index + 'px'
                            })

                        index = 0;
                        $(".bigbox ul").animate({
                            left: -imgwidth * index + 'px'
                        }, 0)
                    }
                    console.log(index);
                    //  实现下边小圆点的切换
                    $("ol li").eq(index).addClass('current').siblings().removeClass();
                }, 3000)
            }
      //右侧点击事件
            function right() {
               $(".right").click(function() {
                if (index < option) {
                 index++;
                // 当索引号小于图片张数时，索引号加一
                   $(".bigbox ul").stop().animate({
                    left: -imgwidth * index + 'px'
                      })
                  }
                if (index == option) {
                $(".bigbox ul").stop().animate({
                 left: -imgwidth * index + 'px'
                        })
 //当索引号等于图片张数时，这时候放到了重复的那张图片.这个时候可以先执行动画函数让其到这张重复的图片，
//然后让索引号变为0，快速的跳转到真正第一张图
                 index = 0;
                 $(".bigbox ul").animate({
                 left: -imgwidth * index + 'px'
                    }, 0)
                   }
                    console.log(index);
                    //  实现下边小圆点的切换
                    $("ol li").eq(index).addClass('current').siblings().removeClass();
                })
            }
            right();
            //调用函数right
            // 左侧点击事件
            function left() {
              $(".left").click(function() {
              if (index > 0) {
                 index--;
                $(".bigbox ul").animate({
                 left: -imgwidth * index + 'px'
                   })
                } else if (index == 0) {
                    index = option;
                  $(".bigbox ul").animate({
                    left: -imgwidth * index + 'px'
                     }, 0)
                    index = option - 1;
                    $('.bigbox ul').animate({
                     left: -imgwidth * index + 'px'
                     })
                  }
 //同样的在左侧点击事件中，当此时是在第一张图时，让index=option（图片书）
 //相当于是最后一张虚拟图（和第一张重复）
 //那么先快速的跳转到虚拟的第一张图，然后让索引号减一。
 //接下来在执行动画函数，此时就切换到了最后一张图
                    $("ol li").eq(index).addClass('current').siblings().removeClass();
                    console.log(index);
                })
            }
            left();
            //调用函数left
            // 点击小圆点实现图片的跳转
            $("ol li").click(function() {
                index = $(this).index();
                $(".bigbox ul").animate({
                    left: -imgwidth * index + 'px'
                })
  $("ol li").eq(index).addClass('current').siblings().removeClass();
            })
        })
    </script>