jQuery轮播图

最新推荐文章于 2023-09-14 18:36:20 发布
黎明不管黑夜的星空
最新推荐文章于 2023-09-14 18:36:20 发布
阅读量183
点赞数 1
分类专栏： Javascript jQuery 文章标签： jquery css html javascript
本文链接：https://blog.csdn.net/weixin_50930483/article/details/125901872
版权
Javascript 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
jQuery
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <title>jquery轮播图</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        /* 1.包裹的容器样式 */
        .screen {
            width: 500px;
            height: 200px;
            /* 设置一个包裹轮播图的盒子 并且设置固定宽高 超出部分 hidden */
            overflow: hidden;
            position: relative;
        }

        /* 2.轮播图列表的样式 */
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            /* li设置浮动使得 li在一排显示 */
            float: left;
        }

        /* 定位属性 left */
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            /* 要设置足够的宽容纳下所有的li(就是大于等于 所有li加起来的宽度) */
            width: 3000px;
        }

        /* 3.导航点的样式 */
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        /* 4.导航点高亮效果 */
        .all ol li.current {
            background: yellow;
        }

        /* 5.左右按钮 */
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }

    </style>
</head>

<body>
    <div class="all" id='all'>
        <div class="screen" id="screen">
            <ul id="ul">
                <li><img src="ima/1.jpg" width="500" height="200" /></li>
                <li><img src="ima/2.jpg" width="500" height="200" /></li>
                <li><img src="ima/3.jpg" width="500" height="200" /></li>
                <li><img src="ima/4.jpg" width="500" height="200" /></li>
                <li><img src="ima/5.jpg" width="500" height="200" /></li>
                <!-- 轮播图片需要追加一张图片和第一张一样的用来过渡 -->
                <!-- 当轮播到这最后一张时，把定位的left属性设置为0px 回到第一张 由于是瞬间回到的 所以看不出特别的明显-->
                <li><img src="ima/1.jpg" width="500" height="200" /></li>
            </ul>
            <!-- 导航点 -->
            <ol>
                <li class="current">1</li>
                <li class="">2</li>
                <li class="">3</li>
                <li class="">4</li>
                <li class="">5</li>
            </ol>
            <!-- 左右按钮 -->
            <div id="arr">
                <span id="left"></span>
                <span id="right">></span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            // 需求:
            // 1.完成轮播图的布局(垂直)
            // 2.左侧用于显示缩略图
            // 3.图片自动切换(无缝衔接)
            // 4.缩略图跟随切换

            // 编码：
            // 定义属性记录值
            // 图片索引值
            var index = 0;

            // 导航点索引值
            var square = 0;

            // 定时器变量
            var timer = null;

            // 获取一张图片的宽，在变换left值的时候用
            var width = $(".screen")[0].offsetWidth;
            // console.log(width); // 测试能不能获取

            // 轮播图片数量
            var Ulen = $("#ul li").length;
            // console.log(Ulen);   //测试 

            // 导航点数量
            var Clen = $(".screen ol li").length;
            // console.log(Clen);   //测试

            // 编写函数 实现图片自动播放切换原理
            var autoPlay = function () {
                // 图片索引值自增
                index++;
                console.log(index);
                // 判断，因为index是从0开始的（0-5），Ulen值为6，所以需要减 1 
                if (index > Ulen - 1) {
                    // 给index赋值切换回第2张，当索引值index到最后一张图片之后，已经马上跳回第一张了，但是肉眼感觉不出来
                    index = 1;
                    // 设置承载图片的容器ul的left为0 是第一张 这个是在过渡的时候瞬间回到第一张的
                    // 第一张和最后一张图片是一样的 所以不是特别看得出来
                    $("#ul").css("left", 0);
                }
                // 动画切换下一个图片，图片从左往右 所以left值是﹣的
                // 索引值代表图片个数 width代表一张图片宽度,相乘就可以求出到第几张图片
                $("#ul").animate({ left: -(index * width) }, 500)
                // 导航点索引值自增
                square++;
                // 判断，当导航点索引值到最后一个点时，切换回第一个
                if (square > Clen - 1) {
                    // 给square赋值0
                    square = 0;
                }
                // 切换小图边框高亮,给当前的square值设置高亮 其它的移除,
                // 已经设置好样式 直接添加类名就行
                $(".screen ol li").eq(square)
                    .addClass("current")
                    .siblings()
                    .removeClass("current");
            }

            // 测试
            // autoPlay();

            // 执行定时器函数,实现自动播放
			clearInterval(timer);
            timer = setInterval(function () {
                autoPlay();
            }, 3000);

            // 鼠标移入移出导航点,hover方法,有两个函数,分别是鼠标移进去和移出来
            $(".screen ol li").hover(
                // 鼠标移入导航点停止执行动画
                function () {
                    clearInterval(timer);
                },
                // 鼠标移出导航点继续执行动画
                function () {
				clearInterval(timer);
                    timer = setInterval(function () {
                        autoPlay();
                    }, 2000);
                }
            )

            //点击导航点切换图片和导航点高亮
            $(".screen ol li").bind("click", function () {
                // this指向绑定点击事件的对象，获取的是点击哪一个的下标
                var _index = $(this).index();
                // console.log(index);  // 测试输出
                // 把获取的值分别赋给图片和导航点
                index = _index;
                square = _index;
                // 高亮的导航点
                $(".screen ol li").eq(square)
                    .addClass("current")
                    .siblings()
                    .removeClass("current");
                    // 显示的图片
                $("#ul").animate({ left: -(index * width) }, 500)
            })

            // 左右按钮
            // 左按钮
            $("#left").on("click", function () {
                // 判断定时器是否在执行，在执行的话取消定时器
                if (timer) {
                    clearInterval(timer);
                }
                // 索引值自减
                index--;
                // 当索引值是在第一个的时候，值直接切换成最后一个，这里的最后一个不包括用来过渡和第一张一样的那张图片，因此index为 4
                if (index < 0) {
                    index = 4;
                    // 切换到最后一张图片
                    $("#ul").css({ "left": "-2500px" });
                }
                // 当index >= 0 时 正常执行切换
                $("#ul").animate({ left: -(index * width) })
                // 导航点索引值自减
                square--;
                // 三目运算符判断是否 < 0
                square = square < 0 ? 4 : square;
                // 设置高亮
                $(".screen ol li").eq(square)
                    .addClass("current")
                    .siblings()
                    .removeClass("current");
            })

            $("#right").on("click", function () {
                if (timer) {
                    clearInterval(timer);
                }
                index++;
                // 012345 当在最后一张图片时瞬间切换的第二张图片 index = 1
                if (index > 5) {
                    index = 1;
                    // 跳回一张
                    $("#ul").css({ "left": "0px" });
                }
                $("#ul").animate({ left: -(index * width) })
                square++;
                square = square > 4 ? 0 : square;
                $(".screen ol li").eq(square)
                    .addClass("current")
                    .siblings()
                    .removeClass("current");
            })
        })
    </script>

</body>

</html>
PS：需要注意一下jquery引入的路径和图片的路径改为自己的。