動態輪播圖

時間 2019-11-13

標籤動態简体版

原文原文鏈接

each()實現遍歷，回調函數第一個參數是索引值，第二個參數爲索引對應元素
append()添加元素
addClass，removeClass添加和刪除元素類
善用全局變量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態輪播圖</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            margin: 50px auto;
            width: 285px;
            height: 235px;
            position:relative;
            overflow: hidden;
        }
        ul{
            width:1425px;
            position:absolute;
        }
        ul img{
            width: 285px;
            height: 235px;
        }
        ul li{
            float: left;
        }
        p{
            position: absolute;
            bottom: 10px;
            left: 90px;
            line-height: 20px;
            text-align: center;
        }
        p span{
            display: block;
            float: left;
            width: 15px;
            height: 20px;
            /*border: 1px solid seagreen;*/
            margin: 2px;
            background-color: #FFE4C4;
            cursor: pointer;
        }
        p span.active{
            color: white;
            background-color: #5d5347;
        }
        button{
            float: left;
        }

    </style>
</head>
<body>
    <div id="box">
        <ul>
        </ul>
        <p></p>
    </div>
    <button id="play">播放</button>
    <button id="stop">暫停</button>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        
        //jquery動態添加圖片
        //一、獲取本地圖片數據
        var imgArr=['./img/lb/1.jpg','./img/lb/2.jpg','./img/lb/3.jpg','./img/lb/4.jpg','./img/lb/5.jpg']
        //二、動態生產圖片
        for(var i=0;i<imgArr.length;i++){
            $('ul').append("<li><img src="+imgArr[i]+"> </li>")
        }
        //三、生成索引
        var str=""
        $('li').each(function (i,ele) {
            str+="<span>"+i+"</span>"
        })
        //四、將索引添加到p標籤中
        $("p").append(str)

        //設置第一個爲active
        $("span:first").addClass("active")

        //五、點擊索引
        var index=0
        $("span").click(function () {
            $(this).addClass("active").siblings("span").removeClass("active")
            //獲取當前點擊的索引
            index = $(this).index()
            $("ul").css("left",(-285*index));
        });
        //存儲全局定時器變量
        var timer=null;
        $("#play").click(function () {
            //開啓定時器
            //一、索引跟着走
            //二、圖片跟着走
            timer=setInterval(next,1000);
            function next() {
                if(index==$('li').length-1){
                    index=0;
                    //修改第一個span元素
                    $("p span").eq(index).addClass("active").siblings("span").removeClass("active");
                    //修改圖片left
                    $("ul").css('left',0);
                }else{
                    index++;
                    //修改後面的元素
                    $("p span").eq(index).addClass("active").siblings("span").removeClass("active");
                    //修改圖片left
                    $("ul").css('left',-285*index);
                }
            }
        });
        //清除定時器，實現暫停效果
        $("#stop").click(function () {
            clearInterval(timer);
        })
    })
</script>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。