jQuery（一）重写滑动图片轮播

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

We_jia

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

阅读量577

点赞数

分类专栏： jQuery 文章标签：图片轮播

本文链接：https://blog.csdn.net/We_jia/article/details/87966275

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前用原生js写过一次，现在用jQuery重新写一次，

效果展示

滑动图片轮播的效果图如下:

思路分析

1.滑动图片轮播的原理就是整体移动，也就是动态改变图片父容器的marginLeft值，来实现整体向左移动

2.实现图片的自动播放，需要使用计时器，并且在计时器里面要控制轮播时间 ,满足的条件为

当前时间-计时器获取到的时间>=2000

var timeold = new Date().getTime();
    var timenow = null;
    var times;
loop();
function loop() {
        times = window.requestAnimationFrame(loop);
        timenow = new Date().getTime();
        if (timenow - timeold >= 2000) {
            timeold = timenow;
            animateinfo();   /图片轮播的函数
        }
        timenow = null;  //释放资源
    }

3.图片轮播使用animate方法，改变父容器的marginLeft值，

注意：图片在进行第二遍轮播时画面会出现暂时的空白，解决方法是复制第一张图片追加到最后一张图片后，当出现倒数第二张图片时，就将父容器的marginLeft值设置为0.，使第一张和最后一张重合。

   //复制第一张图片
    $(".banner li").first().clone().appendTo($(".banner"));

4.点击左右按钮，进行图片切换

（1）点击左按钮，直接调用图片轮播的函数

这里有一个bug需要处理，如果用户快速连续点击左右按钮切换图片，图片轮播就会变得特别快，此时使用对象的属性detail，控制点击次数

   //点击左按钮
    $(".btnleft").click(function (e) {
        if (e.detail < 2) { // 控制点击次数
            animateinfo();
        }
    });

（2）点击右按钮

注意：当前图片是第一张，点击右按钮，下一张是倒数第二张图片（最后一张是复制的图片），需要立刻设置父容器的marginLeft值为-3600（第一张和最后一张重合）

   $(".btnright").click(function (e) {
        if (e.detail < 2) {
            count--;
            if (count < 0) {
                count = $(".banner").children().length - 2;
                $(".banner").css({
                    marginLeft: -3600
                })
            }
            $(".banner").animate({
                marginLeft: -600 * count
            }, 600)
        }
    });

5.给点添加事件，当前进入的点变红色，设置css样式

      $(".dian div").css("backgroundColor", "");
      $(".dian div").eq(index).css("backgroundColor", "red");

6.鼠标进入，轮播暂停，鼠标离开，轮播继续

//鼠标进入离开
    $(".block").bind("mouseenter", function () {
        window.cancelAnimationFrame(times);
    }).bind("mouseleave", function () {
        loop();
    });

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            position: relative;
            width: 600px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
            cursor: pointer;
        }

        .banner {
            width: 4200px;
            height: 300px;
        }

        .banner li {
            list-style: none;
            width: 600px;
            height: 300px;
            float: left;
        }

        .banner li img {
            width: 600px;
            height: 300px;
        }

        .btnway {
            position: absolute;
            z-index: 10;
            width: 600px;
            bottom: 105px;
        }

        .btnway span {
            display: inline-block;
            height: 100px;
            line-height: 100px;
            color: #ff1325;
            font-size: 35px;
        }

        .btnway span:nth-child(1) {
            float: left;
        }

        .btnway span:nth-child(2) {
            float: right;
        }

        .dian {
            position: absolute;
            left: 230px;
            z-index: 10;
            width: 140px;
            height: 15px;
            bottom: 10px;
        }

        .dian > div {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 1px solid black;
            float: left;
            margin: 0 3px;
        }
    </style>
</head>
<body>
<div class="block">
    <ul class="banner">
        <li><img src="./img/1.jpg" alt=""/></li>
        <li><img src="./img/2.jpg" alt=""/></li>
        <li><img src="./img/3.jpg" alt=""/></li>
        <li><img src="./img/4.jpg" alt=""/></li>
        <li><img src="./img/5.jpg" alt=""/></li>
        <li><img src="./img/6.jpg" alt=""/></li>
    </ul>
    <div class="btnway">
        <span class="btnleft"><</span>
        <span class="btnright">></span>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //整体移动
    var timeold = new Date().getTime();
    var timenow = null;
    var times;
    var count = 0;

    //复制第一张图片
    $(".banner li").first().clone().appendTo($(".banner"));
    //第一个点默认颜色
    $(".dian div").first().css("backgroundColor", "red");
    loop();
    function loop() {
        times = window.requestAnimationFrame(loop);
        timenow = new Date().getTime();
        if (timenow - timeold >= 2000) {
            timeold = timenow;
            animateinfo();
        }
        timenow = null;  //释放资源
    }
    //图片轮播
    function animateinfo() {
        count++;
        $(".banner").animate({
            marginLeft: -600 * count
        }, 600, function () {
            if (count >= $(".banner").children().length - 1) {
                $(this).css({
                    marginLeft: 0
                });
                count = 0;
            }
            $(".dian div").css("backgroundColor", "");
            $(".dian div").eq(count).css("backgroundColor", "red");
        });
    }

    //点击左按钮
    $(".btnleft").click(function (e) {
        if (e.detail < 2) { // 控制点击次数
            animateinfo();
        }
    });

    $(".btnright").click(function (e) {
        if (e.detail < 2) {
            count--;
            if (count < 0) {
                count = $(".banner").children().length - 2;
                $(".banner").css({
                    marginLeft: -3600
                })
            }
            $(".banner").animate({
                marginLeft: -600 * count
            }, 600)
            $(".dian div").css("backgroundColor", "");
            $(".dian div").eq(count).css("backgroundColor", "red");
        }
    });

    //鼠标进入离开
    $(".block").bind("mouseenter", function () {
        window.cancelAnimationFrame(times);
    }).bind("mouseleave", function () {
        loop();
    });

    //给点添加事件
    $(".dian div").each(function (index) {
        $(this).mouseenter(function () {
            $(".dian div").css("backgroundColor", "");
            $(".dian div").eq(index).css("backgroundColor", "red");

            $(".banner").animate({
                marginLeft: -600 * index
            }, 600);
            count = index;

        })
    })
</script>
</body>
</html>