纯原生JS轮播图片

来源：互联网发布：淘宝售后退货编辑：程序博客网时间：2024/05/20 21:24
代码：
<!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>
0 0