图片的4种轮换方式

最新推荐文章于 2019-09-04 09:30:00 发布

LuShengYang

最新推荐文章于 2019-09-04 09:30:00 发布

阅读量896

点赞数 1

分类专栏：前端学习总结

本文链接：https://blog.csdn.net/qq_39225382/article/details/76214783

版权

前端学习总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html部分：

<input type="button" value="顺序播放"/>
<input type="button" value="循环播放"/>
<input type="button" value="自动轮播">
<input type="button" value="随机播放">
<div id="picture">
    <div id="left"><</div>
    <div id="right">></div>
    <p id="number">图片数量正在加载中...</p>
    <div id="image">
        <img src="" alt=""/>
    </div>
    <span id="explain">网页正在加载中...</span>

css部分：

        p{
            margin: 0;
            padding: 0;}
        body{
            text-align: center;}
        #picture{
            height: 200px;
            width: 400px;
            margin: 0 auto;
            position: relative;
            top: 30px;
            border:1px solid #000000;}
        #number,#explain{
            height: 30px;
            width: 400px;
            background: #888888;
            opacity:.5;
            font-size: 20px;
            color: #fff;
            line-height: 30px;
            position: absolute;
            left: 0;}
        #explain{
            bottom: 0;}
        #image{
            height: 200px;
            width: 400px;
            background: url("img/加载-008.gif") no-repeat center;
            background-size: 50px 50px;}
        img{
            width: 400px;
            height: 200px;}
        #left,#right{
            height:50px;
            width:50px;
            background: #575757;
            font-size:40px;
            line-height:50px;
            text-align: center;
            font-weight:bold;
            position: absolute;
            top: 75px;
            cursor: pointer;border-radius: 50%;}
        #left:hover,#right:hover{
            opacity:.5;
            color: #ffffff;}
        #left{
            left: 20px;}
        #right{
            right: 20px;}

JavaScript部分：

  window.οnlοad= function () {
            var aBtn = document.getElementsByTagName('input');
            var oImg = document.getElementsByTagName('img')[0];
            var oNumber = document.getElementById('number');
            var oText = document.getElementById('explain');
            var oLeft = document.getElementById('left');
            var oRight = document.getElementById('right');
            var arr = ['img/a16.jpg', 'img/a17.jpg', 'img/a18.jpg','img/a19.jpg','img/a20.jpg', 'img/a21.jpg', 'img/三生三世.jpg', 'img/守望先锋.jpg', 'img/神偷奶爸.jpg'];
            var aText = ['MM-1', 'MM-2','MM-3', 'MM-4', 'MM-5', 'MM-6', '三生三世十里桃花', '守望屁股', '小黄人'];
            var num = 0;
            var onOff = true;
            var timer = null;

            //初始化
           nextPic(num);
           //改变切换方式
            aBtn[0].onclick = function () {
                clearInterval(timer);
                onOff = true;
            }
            aBtn[1].onclick = function () {
                clearInterval(timer);
                onOff = false;
            }
            //向右前进
            oRight.onclick = function () {
                clearInterval(timer);
                num ++;
                if ( num>=arr.length &&onOff ){
                    alert('这已经是最后一张了！！！');
                    num = arr.length-1 ;
                }else if (num>=arr.length &&!onOff){
                    num = 0;
                }
                nextPic(num);
            }
            //向左后退
            oLeft.onclick = function () {
                clearInterval(timer);
                num --;
                if ( num<=-1 &&onOff ){
                    alert('往前没有内容了哦~~~');
                    num = 0;
                }else if (num>=arr.length &&!onOff){
                    num = arr.length-1;
                }
                nextPic(num);
            }

            //自动顺循环播放
            aBtn[2].onclick = function() {
                clearInterval(timer);
                timer = setInterval( function() {
                    num++;
                    if (num>=arr.length){
                        num=0;
                    }
                    nextPic(num);
                } ,1000)
            }

            //自动随机播放
            aBtn[3].onclick = function () {
                clearInterval(timer);
                timer = setInterval( function() {
                    num = Math.round(Math.random()*8);
                    nextPic(num);
                } ,1000)
            }

            function nextPic (a) {
                oNumber.innerHTML = a+1 + '/'+ arr.length;
                oImg.src = arr[a];
                oText.innerHTML = aText[a];
            }
        }