美文网首页个人收藏
使用JS完成首页轮播图效果

使用JS完成首页轮播图效果

作者: 闫松林 | 来源:发表于2018-06-13 23:06 被阅读10次

    点击替换

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>切换图片</title>
            <style>
                div{
                    border: 1px solid white;
                    width:500px ;
                    height: 350px;
                    margin: auto;
                    text-align: center;
                }
            </style>
            <script>
                var i=1;
                function changeImg(){
                    i++;
                    document.getElementById("img1").src="../../img/"+i+".jpg";
                    if(i==3){
                        i=0;
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <input type="button" value="下一张" onclick="changeImg()"/>
                <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
            </div>
        </body>
    </html>
    

    添加定时任务轮播图片

    function init(){
        //书写轮图片显示的定时操作
        setInterval("changeImg()",3000);
    }
    //在body内加入 onload
    <body onload="init()">
    

    相关文章

      网友评论

        本文标题:使用JS完成首页轮播图效果

        本文链接:https://www.haomeiwen.com/subject/rouojftx.html