jQ传统轮播图 - 火车法 -

最新推荐文章于 2021-03-11 11:38:21 发布

赵羽珩

最新推荐文章于 2021-03-11 11:38:21 发布

阅读量388

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的传统轮播图效果——火车法。通过克隆第一张图片并利用CSS和JavaScript实现了平滑过渡的轮播效果，并包含了上一页、下一页按钮及指示点的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQ传统轮播图 - 火车法 -

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            list-style: none;
            text-decoration: none;
        }
        .carousel{
            width: 560px;
            height: 300px;
            margin:50px auto;
            position: relative;
            /*CSS部分写完之后、加溢出隐藏*/
            overflow: hidden;
        }
        .carousel .unit{
            /*宽度必须足够宽*/
            width: 9999px;
            height:300px;
            position: absolute;
            left:0px;
            top:0;
        }
        .carousel .unit li{
            float: left;
            width: 560px;
            height: 300px;
        }
        .carousel .btns a{
            width: 30px;
            height: 70px;
            position: absolute;
            top:50%;
            margin-top: -30px;
            color:#fff;
            background-color: rgba(0,0,0,1);
            text-align: center;
        }
        .carousel .btns a.leftBtn{
            left:10px;
        }
        .carousel .btns a.rightBtn{
            right:10px;
        }
        .carousel .circles{
            width: 90px;
            height:20px;
            position: absolute;
            left:50%;
            margin-left: -45px;
            bottom: 30px;
        }
        .carousel .circles ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0px 5px;
            background-color: orange; 
        }
        .carousel .circles ol li.cur{
            background-color: red;
        }



    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <ul class="unit" id="unit">
            <li><a href="javascript:void(0);"><img src="http://iph.href.lu/560x300?text=slider_01" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="http://iph.href.lu/560x300?text=slider_02" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="http://iph.href.lu/560x300?text=slider_03" alt=""></a></li>
        </ul>
        <div class="btns">
            <a href="javascript:void(0);" class="leftBtn" id="leftBtn">上一页</a>
            <a href="javascript:void(0);" class="rightBtn" id="rightBtn">下一页</a>
        </div>
        <div class="circles" id="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <script type="text/javascript" src ="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        // 获取元素
        var $unit = $("#carousel #unit");
        var $carousel = $("#carousel");
        var $leftBtn = $("#leftBtn");
        var $rightBtn = $("#rightBtn");
        var $circles = $("#circles ol li");
        var amount = $circles.length;


        // 信号量
        var idx = 0;

        // 克隆第一张图片clone()。
        // 追加猫腻图到unit的节点上appendTo()。
        $unit.children("li:first").clone().appendTo($unit);


        // 定时器
        var timer = setInterval(rightFun, 2000);
        // 鼠标进入清除定时器
        $carousel.mouseenter(function(){
            clearInterval(timer);
        });
        // 鼠标离开开始定时器
        $carousel.mouseleave(function(){
            // 设表先关
            clearInterval(timer);
            timer = setInterval(rightFun, 2000);
        });


        // 右按钮的点击事件
        $rightBtn.click(rightFun);
        // 函数声明
        function rightFun(){
            // 防流氓
            if($unit.is(":animated")){
                return;
            }
            // 先拉动再验证
            // 信号量改变
            idx ++;
            $unit.animate({"left": -560 * idx},400,function(){
                if(idx > amount - 1){
                    idx = 0;
                    // 瞬移
                    $unit.css("left",0);
                }
            });

            // 小圆点改变
            // 有一瞬间idx = 5,奇迹上就是猫腻图片，也就是让小圆点去idx = 0
            var i = idx <= amount - 1 ? idx : 0;
            $circles.eq(i).addClass("cur").siblings().removeClass("cur");

        }


        // 左按钮的点击事件
        // 编程思想先验证后拉动
        $leftBtn.click(function(){
            // 防流氓
            if($unit.is(":animated")){
                return;
            }
            // 信号量的改变
            idx --;
            // 先验证
            if(idx < 0){
                idx = amount - 1;
                // 瞬移到猫腻图
                $unit.css("left",-560 * amount);
            }
            $unit.animate({"left" : -560 * idx},500);
            // 小圆点
            $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
        });

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







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