jQuery实现轮播图

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

荒年1010

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

阅读量69

点赞数 3

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

本文链接：https://blog.csdn.net/qq_42673485/article/details/118117802

版权

前端专栏收录该内容

19 篇文章 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">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/轮播图.css">
    <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="./jquery.js"></script>
</head>

<body>
    <div class="box">
        <ul class="clearfix container">
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
            <li><img src="./images/8.jpg" alt=""></li>
            <li><img src="./images/9.jpg" alt=""></li>
            <li><img src="./images/11.jpg" alt=""></li>
            <li><img src="./images/12.jpg" alt=""></li>
            <li><img src="./images/1.jpg" alt=""></li>
        </ul>
        <button class="btn posR"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
        <button class="btn posL"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
        <ol class="circle">
            <li class="circle-bg"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
<script>
    // 获取图片数量
    var len = $("img").length;
    // 设置初始轮播索引
    var index = 0;
    // 图片的自动轮播
    var timer = setInterval(slide, 2000)

    function slide() {
        if ($('.container').is(":animated")) {
            return;
        }
        index++;
        $(".container").animate({
            left: -index * 900
        }, function () {
            if (index == len - 1) {
                index = 0;
                $(".container").css({
                    left: 0
                })
            }
            // eq() 选择器选取带有指定 index 值的元素
            $("ol>li").eq(index).addClass("circle-bg").siblings().removeClass("circle-bg");
        })
    }
    // 鼠标划过停止轮播 离开自动轮播
    $(".container").mousemove(function () {
        // $(".btn").css("display","block");
        clearInterval(timer);
    })
    $(".container").mouseleave(function () {
        //     $(".btn").css("display","none");
        timer = setInterval(slide, 2000);
    })
    // 左右按钮实现点击
    // 先拉动图片,再判断索引
    $(".posR").click(function () {
        if ($('.container').is(":animated")) {
            return;
        }
        slide();
    })
    // 先判断索引,再拉动图片
    $(".posL").click(function () {
        if ($('.container').is(":animated")) {
            return;
        }
        index--;
        if (index < 0) {
            index = len - 2;
            $(".container").css({
                left: -(index + 1) * 900
            })
        }
        $(".container").animate({
            left: -index * 900
        })
        $("ol>li").eq(index).addClass("circle-bg").siblings().removeClass("circle-bg");
    })
    $("ol>li").click(function () {
        if ($('.container').is(":animated")) {
            return;
        }
        index = $(this).index();
        $("ol>li").eq(index).addClass("circle-bg").siblings().removeClass("circle-bg");
        $(".container").animate({
            left: -index * 900
        })
    })
</script>

</html>