• JavaScript 图片自动切换


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #main{
                     300px;
                    padding: 20px;
                    margin: 10px auto;
                    background-color: yellow;
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <p id="info"></p>
                <img src="img/1.jpg"/>
            </div>
            <button id="start">开始/暂停</button>
        </body>
        
        <script type="text/javascript">
            //创建一个数组来保存图片路径,切换图片就是切换图片路径
            var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
            //获取img元素,
            var img=document.getElementsByTagName("img")[0];
            //alert(img);
            //创建保存图片路径的索引(数组下标)
            var index=0;
            
            //-开启定时器来自动切换图片
            var timer;
            var count=0;
            //设置一下开始/暂停
            document.getElementById("start").onclick=function(){
                count++;
                if(count%2!=0){
                    timer=setInterval(function(){
                    index++;
    //                if(index>imgArr.length-1){
    //                    index=0;
    //                }
                      index=index % imgArr.length;//同上面的if判断 0%4=4 1%4=1 ...4%4=0
                    //换图
                    img.src=imgArr[index];
                    
                    },1500);
                }else{
                    clearInterval(timer);
                }
                
            }
        </script>
    </html>
  • 相关阅读:
    touch
    ls
    Linux基础
    errors
    strconv
    strings
    fmt
    os/exec
    笔记本连不上网怎么办
    笔记本连不上网怎么办
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/11304307.html
Copyright © 2020-2023  润新知