jQuery轮播图 - 呼吸式 -

最新推荐文章于 2020-06-03 17:19:53 发布

赵羽珩

最新推荐文章于 2020-06-03 17:19:53 发布

阅读量701

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- CSS部分 -->
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            list-style: none;
            text-decoration: none;
        }
        .carousel{
            width: 900px;
            height: 540px;
            margin:50px auto;
            position: relative;
        }
        .carousel .imgList li{
            width: 900px;
            height:540px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .carousel .imgList li:first-child{
            display: block;
        }
        .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: 120px;
            height: 20px;
            position: absolute;
            bottom: 30px;
            left:50%;
            margin-left: -60px;
        }
        .carousel .circles ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0px 5px;
            background-color: #000;
            color:#fff;
            text-align: center;
        }
        .carousel .circles ol li.cur{
            background-color: yellow;
            color:#000;
        }
    </style>
</head>
<body>
    <!-- HTML部分 -->
    <div class="carousel" id="carousel">
        <div class="imgList" id="imgList">
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://iph.href.lu/900x540?text=slider_01" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://iph.href.lu/900x540?text=slider_02" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://iph.href.lu/900x540?text=slider_03" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://iph.href.lu/900x540?text=slider_04" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <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">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>
    </div>
    <!-- JS部分 -->
    <script type="text/javascript" src ="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        // 获取元素
        var $carousel = $("#carousel");
        var $imgLists = $("#imgList ul li");
        var $leftBtn = $("#leftBtn");
        var $rightBtn = $("#rightBtn");
        var $circles = $("#circles ol li");
        var amount = $imgLists.length;


        // 定时器
        var timer = setInterval(rightFun, 2000);
        // 鼠标进入大盒子关闭定时器
        $carousel.mouseenter(function(){
            clearInterval(timer);
        });
        // 鼠标离开重新开启定时器
        $carousel.mouseleave(function(){
            // 设表先关
            clearInterval(timer);
            timer = setInterval(rightFun, 2000);
        });


        // 信号量
        var index = 0;
        // 右按钮的点击事件
        $rightBtn.click(rightFun);
        // 右按钮的声明
        function rightFun(){
            // 防流氓
            if($imgLists.is(":animated")){
                return;
            }
            // 老图淡出
            $imgLists.eq(index).fadeOut(500);

            // 信号量改变
            index ++;
            // 后验证
            if(index > amount - 1){
                index = 0;
            }

            // 新图淡入
            $imgLists.eq(index).fadeIn(500);
            // 小圆点改变
            $circles.eq(index).addClass("cur").siblings().removeClass("cur");
        }



        // 左按钮点击事件
        $leftBtn.click(function(){
            // 当图片不运动时，执行内部函数
            if(!$imgLists.is(":animated")){
                // 老图淡出
                $imgLists.eq(index).fadeOut(500);
                // 信号量改变
                index --;
                if(index < 0){
                    index = amount - 1;
                }
                // 新图淡入
                $imgLists.eq(index).fadeIn(500);
                // 小圆点改变
                $circles.eq(index).addClass("cur").siblings().removeClass("cur");
            }
        });

        // 小圆点的事件
        $circles.mouseenter(function(){
            // 老图淡出
            $imgLists.eq(index).stop(true).fadeOut(500);
            // 信号量改变
            index = $(this).index();
            // 新图淡入
            $imgLists.eq(index).stop(true).fadeIn(500);
            // 小圆点改变
            $(this).addClass("cur").siblings().removeClass("cur");
        });



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

赵羽珩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery轮播图 - 呼吸式 -

html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style type="text/css"> *{ padding:0; margin:0; list-style: none;
复制链接

扫一扫