呼吸轮播图

最新推荐文章于 2023-03-08 20:54:30 发布
little_蔷薇
最新推荐文章于 2023-03-08 20:54:30 发布
阅读量349
点赞数
CC 4.0 BY-SA版权
分类专栏：前端文章标签： jQuery
本文链接：https://blog.youkuaiyun.com/qq_34559257/article/details/80335619
前端专栏收录该内容
19 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>动画-案例《轮播图》</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .slider {
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
        }

        .slider .image li {
            position: absolute;
            display: none;
        }

        .slider .image li:first-child {
            display: block;
        }


        .arrow {
            display: none;
        }

        .slider:hover .arrow {
            display: block;
        }

        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }

        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .arrow-left {
            left: 0;
        }

        .arrow-right {
            right: 0;
        }

        .index {
            position: absolute;
            /* border: 1px solid #000; */
            width: 160px;
            bottom: 10px;
            left: 50%;
            margin-left: -50px;
        }

        .index li {
            width: 15px;
            height: 15px;
            float: left;
            margin-right: 5px;
            background-color: white;
            cursor: pointer;
        }

        .index li.active {
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="slider">
        <!--图片容器  8图 -->
        <ul class="image">
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/6.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/7.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/8.jpg" alt="">
                </a>
            </li>
        </ul>
        <ul class="index">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--箭头-->
        <div class="arrow">
            <span class="arrow-left">&lt;</span>
            <span class="arrow-right">&gt;</span>
        </div>
    </div>
    <script src="./lib/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var idx = 0;

            //右边按钮
            $('.arrow>.arrow-right').click(function () {
                idx++;
                if (idx == 8) {
                    idx = 0;
                }

                $('.slider>ul.image>li').eq(idx).fadeIn(500).siblings().fadeOut(500);
                $('ul.index li').eq(idx).addClass('active').siblings().removeClass('active');
            });


            //左边的按钮
            $('.arrow>.arrow-left').click(function () {
                idx--;
                if (idx < 0) {
                    idx = 7;
                }
                $('.slider>ul.image>li').eq(idx).fadeIn(500).siblings().fadeOut(500);
                $('ul.index li').eq(idx).addClass('active').siblings().removeClass('active');
            });

            $('.index li').mouseenter(function () {
                // 保存索引
                idx = $(this).index();

                $(this).addClass('active').siblings().removeClass('active');

                $('ul.image>li').eq($(this).index()).fadeIn().siblings().fadeOut();
            })


        });
    </script>
</body>

</html>