超級簡單的jquery輪播圖demo

時間 2019-11-12

標籤超級簡單 jquery demo 欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>輪播圖demo</title>
        <script type="text/javascript" src="js/jquery-3.2.1.slim.js" ></script>
        <link rel="stylesheet" href="css/demo.css" />
        <script type="text/javascript">
            var t = n = i = 0, count;
            $(function(){
                count=$(".scroll_pic a").length;//求出圖片數量
                $(".scroll_pic a:not(:first)").hide();//隱藏第一張之外的全部圖片
                $("#scroll_button li").click(function(){
                    i = n = $(this).index();//index() 方法返回指定元素相對於其餘指定元素的 index 位置。
                    $(".scroll_pic a").eq(i).show().siblings().hide();//siblings()選擇除自身之外的全部同胞元素
                    $(this).addClass("scroll_in").siblings().removeClass("scroll_in");
                    //鼠標通過圖片區域中止setInterval()調用函數，移開恢復
                });
                t = setInterval("picShowAuto()", 3500);//setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉
                $(".scroll").hover(function(){clearInterval(t)}, function(){t = setInterval("picShowAuto()", 3500);});
            });
            
            function picShowAuto(){
                n = n >=(count -1) ?0 : ++n;
                $("#scroll_button li").eq(n).trigger("click");//trigger() 方法觸發被選元素的指定事件類型
            }
        </script>
    </head>
    <body>
        <div class="scroll">
            <div class="scroll_pic">
                <a href="#"><img src="img/pic1.jpg" alt=""/></a>
                <a href="#"><img src="img/pic2.jpg" alt=""/></a>
                <a href="#"><img src="img/pic3.jpg" alt=""/></a>
                <a href="#"><img src="img/pic.jpg" alt=""/></a>
            </div>
            <ul id="scroll_button">
                <li class="scroll_in"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
    </body>
</html>

.scroll {
    width: 720px;
    height: 410px;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}

.scroll ul {
    padding: 5px 5px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    bottom: 10px;
    left: 50%;
    background:rgba(455,455,455,0.4);
    border-radius: 28px;
}

.scroll ul li {
    float: left;
    margin: 0px 5px;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border:1px #73B613 solid;
    background: #FCBE47;
    cursor: pointer;
        
}

.scroll ul li.scroll_in{
    background:#FF6600;
}

相關標籤/搜索

每日一句

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