首页 > 代码库 > 原生js点击轮播图效果

原生js点击轮播图效果

2024-10-02 23:17:39   216人阅读

技术分享

<!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="http://www.mamicode.com/img/1.png">
            </li>
            <li>
                <img src="http://www.mamicode.com/img/2.png">
            </li>
            <li>
                <img src="http://www.mamicode.com/img/3.png">
            </li>
            <li>
                <img src="http://www.mamicode.com/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点击轮播图效果


联系
我们