jQuery无缝轮播图

最新推荐文章于 2022-06-28 20:13:35 发布

冒险岛_0_

最新推荐文章于 2022-06-28 20:13:35 发布

阅读量1.3k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_41741971/article/details/90579044

版权

Javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、无缝轮播图

运行结果图：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        ul, ol { list-style: none;}
        a {border: none;text-decoration: none;color: inherit;}
        * {margin: 0;padding: 0;}
        .clearfix:after{content: '';display: block;clear: both;}
        .fl-L{ float:left;}
        .fl-R{ float:right;}

        body{
            background-color: #cccccc;
        }

        #baner{
            position: relative;
            width: 800px;
            height: 450px;
            margin: 100px auto;
            /*box-shadow: 0 0 10px fuchsia;*/
            overflow: hidden;
        }

        /* ul */
        #baner #conner .tur{
            position: absolute;
            display: flex;
        }

        /* 两边的按钮 */
        #baner #conner .btn img{
            position: absolute;
            cursor: pointer;
        }
        #baner #conner .btn img:hover{
            opacity: 0.6;
        }
        #baner #conner .btn{
            position: absolute;
            width: 800px;
            top: calc(50% - 25px);
        }
        #baner #conner .btn img:nth-child(1){
            left: 10px;
        }
        #baner #conner .btn img:nth-child(2){
            right: 10px;
        }

        /* 下面的小圆点 */
        #baner #conner .bum{
            position: absolute;
            /*border: 1px solid red;*/
            bottom: 10px;
            left: calc(50% - 100px);
            width: 200px;
            display: flex;
            justify-content: space-around;
        }
        #baner #conner .bum p{
            text-align: center;
            width: 30px;
            line-height: 30px;
            font-size: 30px;
            font-family: '黑体';
            background-color: #cccccc;
            border-radius: 50%;
            color: white;
            cursor: pointer;
        }
        #baner #conner .bum .on{
            background-color: orangered;
        }

    </style>
    <title>Document</title>
    <script src="animate.0.1.3.js"></script>
</head>
<body>
<div id="baner">
    <div id="conner">
        <ul class="tur">
            <li>
                <a href="#"><img src="img/imgs/0.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/imgs/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/imgs/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/imgs/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/imgs/4.jpg" alt=""></a>
            </li>
        </ul>
        <div class="btn">
            <img src="img/imgs/btnL.png" alt="">
            <img src="img/imgs/btnR.png" alt="">
        </div>
        <div class="bum">
            <p class="on">1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3/jquery.min.js"></script>
<script>
    /*
    $(":animated") ----选中在运动的元素
    is()
     根据选择器、DOM元素或jQuery对象来检测匹配元素集合，如果其中至少有一个元素符号这个给定的表达式就返回true
    列（1）：
        is(".c1") 如果匹配到类名c1就返回true，没有匹配到就返回false
    列（2）：
        is(":animated") 判断是不是在运动，如果运动是返回true 没有运动就返回false
    */

    /* 获取所需元素 */
    var oUl = $("#conner .tur"); //ul
    var aLi = $("#conner .tur li");//li
    var aBtn = $("#conner .btn img");//获取两边的按钮
    var aBum = $("#conner .bum p");//获取小圆点

    /* 初始化索引和对象长度 */
    var index = 0;
    var length = aLi.length;
    console.log(length);

    /* 克隆第一个元素节点添加到后面 */
    oUl.append(aLi.eq(0).clone());

    /* 右边的按钮 */
    aBtn.eq(1).click(function () {
        if(oUl.is($(":animated"))) return;/* 解决动画积累 */
        index++;
        oUl.stop(true).animate({left:-800*index},800,function () {
            if(index >= length){
                index = 0;
                oUl.css({left:0});
            }
        });
        change();
    });

    /* 左边的按钮 */
    aBtn.eq(0).click(function () {
        if(oUl.is($(":animated"))) return;/* 解决动画积累 */
        index--;
        if(index < 0){
            index = length-1;
            oUl.css({left:-800*length});
        }
        oUl.stop(true).animate({left:-800*index},800);
        change();
    });

    /* 小圆点变色 */
    function change(){
        var n = index;
        if(index === length) n=0;
        aBum.eq(n).addClass("on").siblings().removeClass("on");
    }

    /* 小圆点击事件 */
    aBum.click(function () {
        $(this).addClass("on").siblings().removeClass("on");
        index = $(this).index();
        oUl.stop(true).animate({left:-800*index},800);
    });
</script>
</body>
</html>

冒险岛_0_

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery无缝轮播图

1、无缝轮播图运行结果图：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, ini...
复制链接

扫一扫