原生js點擊輪播圖效果

最後更新：2017-06-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：.class order head png img utf-8 win document end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <title>原生js輪播效果</title>
</head>
<body>
<style>
    #app{
        width: 100%;
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    ul{
        display: inline-block;
    }
    #app1{
        display: inline-block;
        overflow: hidden;
        position: relative;
    }
    li{
        float: left;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid red;
        display: none;
    }
    img{
       width: 140px;
        height: 140px;
    }
    #app2{
        position: absolute;
        bottom:10px;
        width: 100%;
    }
    #app2 div{
        display: inline-block;
        width: 25%;
        text-align: center;
    }
    #app2 div span{
        display: inherit;
        border-radius: 10px;
        padding: 3px;
        background: black;
        color: #fff;
    }
    #app2 div .active{
        background: red;
    }
</style>

<div id="app">
    <div id="app1">
        <ul>
            <li style="display: block">
                <img src="img/1.png">
            </li>
            <li>
                <img src="img/2.png">
            </li>
            <li>
                <img src="img/3.png">
            </li>
            <li>
                <img src="img/4.png">
            </li>
        </ul>
        <div id="app2">
        </div>

    </div>
    <div id="abc">

    </div>
</div>

<script>
    window.onload=function () {
        var arrlist=null;
        var timers=null;
        function lunbo() {
            var app1=document.getElementById(‘app1‘);
            var li=app1.getElementsByTagName(‘li‘);
            var app2=document.getElementById(‘app2‘);
            var text=document.getElementById(‘text‘);
            var appabc=document.getElementById(‘abc‘);
            arrlist=[‘第一張‘,‘第二張‘,‘第三張‘,‘第四張‘];
            for(var i=0;i<li.length;i++){
                //建立標記
                var span=document.createElement(‘div‘);
                span1=document.createElement(‘span‘);
                span1.innerHTML=i;
                span.appendChild(span1);
                app2.appendChild(span);
            }
            var spanactive=document.getElementsByTagName(‘span‘);
            //點擊操作
            for(var i=0;i<spanactive.length;i++){
                if(i==0){
                    spanactive[i].className=‘active‘
                }
                spanactive[i].index=i;
                spanactive[i].onclick=function () {
                    for(var j=0;j<spanactive.length;j++){
                        spanactive[j].className=‘‘;
                        li[j].style.display=‘none‘;
                    }
                    this.className=‘active‘;
                    li[this.index].style.display=‘block‘;
                    appabc.innerHTML=arrlist[this.index]
                }
                appabc.innerHTML=arrlist[0]
            }
        }

        lunbo()
    }
</script>
</body>
</html>

原生js點擊輪播圖效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

原生js點擊輪播圖效果

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support