纯原生JS轮播图片_纯js轮播-CSDN博客

本文链接：https://blog.csdn.net/u011171159/article/details/50737419
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片切换</title>
<style>
    *{padding: 0;margin: 0; text-decoration: none; list-style: none; font-family: '微软雅黑'}
    .content{
        position: relative;
        width: 500px;
        height: 400px;
        margin: 20px auto 0;
        background: #efefef;
        border: 10px solid #E0E0E0;
        border-radius: 4px;
    }
    #prev,#next{
        position: absolute;
        top: 175px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #fff;
        opacity: .5;
        filter:alpha(opacity=50);
        color: #333;
    }#prev:hover,#next:hover{
        filter:alpha(opacity=80);
        opacity: .8;
    }
    #prev{left: 0;}
    #next{right: 0;}
    #intro,#num{
        position: absolute;
        width: 100%;
        padding: 5px 0;
        text-align: center;
        background: #000;
        opacity: .8;
        filter:alpha(opacity=80);
        color: #fff;
    }
    #intro{bottom: 0;}
    #num{top: 0;}
    #img{
        width: 500px;
        height: 400px;
    }
    .top{
        width: 500px;
        margin: 20px auto 0;
        text-align: center;
    }
    #p1{padding: 10px 0}
    .top button.active{
        background: #e65d33;
        color: #fff;
    }
    .top button{
        width: 80px;
        height: 30px;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
        background: transparent;
        border: 1px solid #e65d33;
        color: #e65d33 }


</style>

</head>

<body>
    <div class="top">
        <button class="active">循环切换</button>
        <button>顺序切换</button>
        <p id="p1">图片可从最后一张跳转到第一张循环切换</p>
    </div>
    <div class="content">
        <a href="javascript:;" id="prev"> < </a>
        <a href="javascript:;" id="next"> > </a>
        <p id="intro">描述文字...</p>
        <p id="num">数量...</p>
        <img src="" alt="" id="img">

    </div>
    <script>
    window.onload = function(){
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var intro = document.getElementById('intro');
        var num = document.getElementById('num');
        var img = document.getElementById('img');
        var p1 = document.getElementById('p1');
        var oBtn = document.getElementsByTagName('button');
        var n = 0;
        var off = true;  //循环切换为true
        var arrImg = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
        var arrImgBg = ['#7070B6','#EDA727','#D6ED27','#3FF157','#F13F76'];
        var arrTxt = ['blue','orange','yellow','green','red'];

        oBtn[0].onclick = function(){
            off = true;
            p1.innerHTML = '图片可从最后一张跳转到第一张循环切换';
        }
        oBtn[1].onclick = function(){
            off = false;
            p1.innerHTML = '图片只能到最后一张或只能到第一张切换';
        }

        function init(){
            num.innerHTML = n+1+' / '+arrImgBg.length;
            intro.innerHTML = arrTxt[n];
            img.style.backgroundColor = arrImgBg[n];
        }
        init();
        // img.src = arrImg[n];
        next.onclick = function(){
            n++;
            if(n == arrImg.length){
                if(off){
                    n = 0;
                }else{
                    alert('最后一张啦~')
                    n = arrImg.length-1;
                }

            }
            init();
        }
        prev.onclick = function(){
            n--;
            if(n == -1){
                if(off){
                    n = arrImg.length-1;
                }else{
                    alert('第一张啦~')
                    n = 0;
                }
            }
            init();
        }
    }
    </script>
</body>
</html>