設為首頁收藏本站
查看: 172|回復: 1
打印 上一主題 下一主題

[交流] 【web】簡單輪播效果

[復制鏈接]
  • TA的每日心情
    奮斗
    3 天前
  • 簽到天數: 183 天

    [LV.7]常住居民III

    跳轉到指定樓層
    1#
    發表于 4 天前 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
    HTML

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>TiTle</title>
    </head>
    <body>
    <div class="example" id="example" onmouseover="clearInterval(time);" onmouseout="setInt()">       
            <div class="ft-carousel" id="carousel_1">
                    <ul class="carousel-inner">
                            <li class="carousel-item item-active" style="background-color: red">0</li>
                            <li class="carousel-item" style="background-color: blue">1</li>
                            <li class="carousel-item" style="background-color: pink">2</li>
                            <li class="carousel-item" style="background-color: rgb(255,158,15);">3</li>
                            <li class="carousel-item" style="background-color: rgb(15,158,105)">4</li>
                            <li class="carousel-item" style="background-color: rgb(55,55,15)">5</li>
                    </ul>

                    <div id="carousel-indicators">
                            <span data-index="0" class="active"></span>
                            <span data-index="1" class=""></span>
                            <span data-index="2" class=""></span>
                            <span data-index="3" class=""></span>
                            <span data-index="4" class=""></span>
                            <span data-index="5" class=""></span>
                    </div>
                   
                    <span class="carousel-btn carousel-prev-btn">&lt;</span>
                    <span class="carousel-btn carousel-next-btn">&gt;</span>

            </div>
    </div>
    </body>
    </html>


    css

    *{margin:0;padding:0;color:#fff;font-size:25px;transition:all .6s}
    ul{list-style-type:none}
    .example{width:1000px;height:500px;margin:100px auto 0;position:relative}
    .ft-carousel{width:100%;height:100%;position:relative}
    .carousel-inner{width:100%;height:100%;list-style-type:none}
    .carousel-item{width:100%;height:100%;position:absolute;opacity:0}
    .carousel-btn{width:45px;height:50px;line-height:50px;text-align:center;background-color:rgba(0,0,0,.3);position:absolute;top:50%;margin-top:-25px;z-index:6;cursor:pointer}
    .carousel-next-btn{right:0}
    #carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:6;font-size:0;margin-left:-63px}
    #carousel-indicators span{width:15px;height:15px;background-color:pink;display:inline-block;border-radius:50%;cursor:pointer;margin:0 3px}
    #carousel-indicators .active{background-color:#000}
    .item-active{opacity:1;z-index:5}
    .active{background-color:red}
    .carousel-btn:hover{background-color:rgba(0,0,0,.6)}


    JavaScript

    var
            // 獲取 li
            carouselItem = document.getElementsByClassName('carousel-item'),

            // li-length   span-length
            ItemLength = spanLength = carouselItem.length,

            // 獲取按鈕
            btn = document.getElementsByClassName('carousel-btn'),

            // 獲取 carousel-indicators   span
            dian = document.getElementById('carousel-indicators'),
            span = dian.getElementsByTagName('span'),

            index = 0;
            time = null;

    function clearIndex(){
            for ( var i = 0; i < ItemLength ; i ++ ) {
                    carouselItem.className = 'carousel-item';
                    span.className = '';
            }
    }

    function goIndex(){
            clearIndex();
            // 添加 li .item-active
            carouselItem[index].className = 'carousel-item item-active';
            span[index].className = 'active';
    }

    // 上下 切換
    function s( e ) {
            e === true ? index > 0 ? index -- : index = ItemLength - 1 : index < ItemLength - 1 ? index ++ : index = 0;
            goIndex();
    }
    btn[0].onclick = function() { s( true ) };
    btn[1].onclick = function() { s( false ) };

    // 點
    function spot() {
            for ( var i = 0 ; i < spanLength; i++ ) {
                    span.addEventListener('click',function(){
                            var spanClick = this.getAttribute('data-index');
                            index = spanClick;
                            goIndex();
                    });
            }
    }
    // 定時
    function setInt() {
            time = setInterval(function(){
                    s( false );
            } , 800 );
    }
    spot();setInt();



    沒有兼容
    分享到:  QQ好友和群QQ好友和群 QQ空間QQ空間 騰訊微博騰訊微博 騰訊朋友騰訊朋友
    收藏收藏1 分享分享
  • TA的每日心情

    前天 20:08
  • 簽到天數: 18 天

    [LV.4]偶爾看看III

    2#
    發表于 前天 20:09 | 只看該作者
    一臉懵逼的我
    回復 支持 反對

    使用道具 舉報

    您需要登錄后才可以回帖 登錄 | 注冊

    本版積分規則

    關閉

    站長推薦 上一條 /1 下一條

    紅盟社區--中國紅客聯盟 

    Processed in 0.088802 second(s), 14 queries.

    站點統計| 舉報| Archiver| 手機版| 黑屋 |   

    Powered by HUC © 2001-2017 Comsenz Inc.

    手機掃我進入移動觸屏客戶端

    關注我們可獲取更多熱點資訊

    Honor accompaniments. theme macfee

    快速回復 返回頂部 返回列表
    奥运排球比分