点击自动播放图片,网络图片,首次播放可能有点慢,缓存下来就是正常播放

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 800px;
                height: 400px;
                background: pink;
                float: left;
            }
            #wrap{
                width: 940px;
                margin: 20px auto;
                overflow: hidden;
            }
            #wrap input{
                display: block;
                width: 100px;
                height: 40px;
                margin: 20px;
                text-align: center;
            }
            .input{
                width: 140px;
                float: left;
                padding-top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="input">
                <input type="button" value="点击播放" />
                <input type="button" value="停止播放" />
            </div>
            <div id="div1"></div>
        </div>
        <script>
        var arrUrl=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230963&di=a7b0a176a6c25ec6a5bbfe0ebf00244d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.jschina.com.cn%2F0%2F10%2F49%2F73%2F10497332_169308.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230771&di=f2b78875a7a0aad0d912ec18ca24e757&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.51windows.net%2Fflower%2F_img%2FFlower_58526323.JPG','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488636196992&di=6356b814b7ad5123884ea4bc1595d8b0&imgtype=0&src=http%3A%2F%2Fm.tuniucdn.com%2Ffilebroker%2Fcdn%2Folv%2F1f%2F36%2F1f3610885cd4d11ed87293318ef1ca0c_w800_h0_c0_t0.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230783&di=eeb53155dcff68a49e648d611886e116&imgtype=jpg&er=1&src=http%3A%2F%2Fs1.lvjs.com.cn%2Fpics%2Fsuper%2F2014%2F03%2FFA3XB.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489230824&di=6d53c4430f74b5120e12795bf31ba8b3&imgtype=jpg&er=1&src=http%3A%2F%2Fupload.univs.cn%2F2012%2F1101%2Fthumb_940__1351759545513.jpg'];
        var aBtn=document.getElementsByTagName('input');
        var timer=null;
        var oDiv=document.getElementById('div1');
        var num=0;
        aBtn[0].onclick=function(){
            clearInterval(timer); //开启前清一次
            function play(){
                oDiv.style.background='url('+arrUrl[num]+')';
                num++;
                num%=arrUrl.length;
            }
            timer=setInterval(play,2000);
        }
        aBtn[1].onclick=function(){
            clearInterval(timer);
        }
    </script>
    </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 点击自动播放图片,网络图片,首次播放可能有点慢,缓存下来就是正常播放

赞 (2)
分享到:更多 ()

发表评论 4

  1. 匿名Es la temporada de vacaciones, el momento en el que la mayorГ­a revoluciona su atmГіsfera tecnolГіgica con nuevos dispositivos con baterГ­as nuevas y algunos solo promedio WiД™cej komfortu - prueba ci Johngnika John Deere 6170R - Testy Farmera comprar monero con usd回复
  2. 匿名Xanthogranulomas of the choroids plexus (XG) are benign tumours of debatable etiology which become rarely symptomatic. Only few cases have been studied annular disc KГ©miai radiculopathia sciatica hernia de disco lumbar sintomas回复
  3. 匿名Na astrazeneca transformamos idГ©ias em medicamentos que mudam a vida. Trabalhar aqui significa ser empreendedor, pensar grande e trabalhar em conjunto facet arthrosis treatment回复
  4. 匿名Wage information for Utah jobs at the statewide and selected sub-state areas. Labor Force Data Viewer Utah employment and unemployment data by county Dental hygienist vs dentist salary回复