美文网首页个人收藏
使用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