文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript滚动轮播图制作原理详解

2024-04-02 19:55

关注

本文实例为大家分享了JavaScript滚动轮播图制作原理,供大家参考,具体内容如下

滚动轮播图

滚动轮播图布局关键:是所有图片并排在一起,所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略:先拉动,再瞬移
左按钮拉动策略:先瞬移,再拉动
与呼吸轮播图一样,需要做防流氓策略

复制代码:将我代码中的图片更换为你的图片,注意图片路径,还需要引入js库,我引入的是jquery-1.12.3.min.js的版本,引入的时候注意路径

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul, ol {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .carousel {
            width: 560px;
            height: 300px;
            margin: 50px auto;
            border: 5px solid red;
            position: relative;
            overflow: hidden;
        }
        
         .carousel .unit {
             position: absolute;
             width: 9999px;
             left: 0;
             top: 0;
         }
         .carousel .unit li {
             float: left;
             width: 560px;
             height: 300px;
         }
         .btns a {
             position: absolute;
             width: 30px;
             height: 60px;
             top: 50%;
             margin-top: -30px;
             background-color: rgba(0, 0, 0, .5);
             color: #fff;
             font-size: 20px;
             line-height: 60px;
             text-align: center;
         }
         .btns a:first-child {
             left: 10px;
         }
         .btns a:last-child {
             right: 10px;
         }
         .circles {
             position: absolute;
             width: 140px;
             height: 20px;
             left: 50%;
             margin-left: -70px;
             bottom: 30px;
         }
         .circles ol {
             width: 150px;
         }
         .circles ol li {
             float: left;
             width: 20px;
             height: 20px;
             margin-right: 10px;
             background-color: orange;
             border-radius: 50%;
         }
         .circles ol li.cur {
             background-color: yellow;
         }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <ul class="unit" id="unit">
            <li><img src="images/0.jpg" alt=""></li>
            <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>
        </ul>
        <div class="btns">
            <a href="javascript:void(0)" id="leftBtn">&lt;</a>
            <a href="javascript:void(0)" id="rightBtn">&gt;</a>
        </div>
        <div class="circles" id="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
    // 获取元素
    var $unit = $("#unit");
    var $leftBtn = $("#leftBtn");
    var $rightBtn = $("#rightBtn");
    var $circles = $("#circles ol li");
    var length = $circles.length;
    // console.log(length);

    // 定义信号量 有效范围: 0, 1, 2, 3, 4
    var idx = 0;

    // 克隆第一张图片追加到最后一张
    $unit.children("li:first").clone().appendTo($unit);

    // 右按钮的点击事件
    $rightBtn.click(function() {
        // 防流氓
        if ($unit.is(":animated")) {
            return;
        }
        // 拉动策略: 先拉动, 再瞬移
        idx++;
        console.log(idx);
        // 信号量 有效值是: 0, 1, 2, 3, 4, 5(5是猫腻图)
        $unit.animate({"left": -560 * idx}, 1000, function() {
            // 当猫腻图完全显示之后验证信号量
            if (idx > length - 1) {
                // idx 归零
                idx = 0;
                // 瞬间移动到真图
                $unit.css("left", 0);
            }

        })
        // 小圆点在1000ms之内,对应的是idx = 5 是猫腻图
        // 0 - 4 是有效值, 5对应的是猫腻图
        // 定义一个变量用于中转信号量
        var i = idx <= 4 ? idx : 0;
        $circles.eq(i).addClass("cur").siblings().removeClass("cur");

    })


    // 左按钮点击事件
    $leftBtn.click(function() {
        // 防流氓
        if ($unit.is(":animated")) {
            return;
        }

        // 左按钮的拉动策略: 先瞬移, 再拉动
        idx--;
        // 边界判断
        if (idx < 0) {
            idx = length - 1;
            // 瞬间移动到猫腻图
            $unit.css("left", -560 * length);
        }
        console.log(idx);
        // 拉动
        $unit.animate({"left": -560 * idx}, 1000);

        // 当前小圆点加cur
        $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
    })

    // 小圆点事件
    $circles.mouseenter(function() {
        // 改变信号量
        idx = $(this).index();
        console.log(idx);
        // 拉动
        $unit.stop(true).animate({"left": -560 * idx}, 600);
        // 小圆点加cur
        $(this).addClass("cur").siblings().removeClass("cur");
    })


    </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯