原生JS实现图片循环切换 

<!-- <!DOCTYPE html>
<html>
<head>
    <title>原生JS实现图片循环切换 —— 方法一</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        #img{
            left:50%;
            position: relative;
            top:-50px;
        }
    </style>
</head>
<body>
<div id="div">
    <img id="obj" src="">
</div>

<script type="text/javascript">
    var arr=new Array();
    arr[0]="../img/2.jpg";
    arr[1]="../img/3.jpg";
    arr[2]="../img/bg.jpg";
    arr[3]="../img/1.jpg"
    var curIndex=0;
    setInterval(function(){
　　　　#通过数组将图片的src属性进行修改
        var obj=document.getElementById("obj");
        //var img=document.getElementById("img");
        if(curIndex==arr.length-1){
            curIndex=0;
        }
        else{
            curIndex+=1;
        }
        obj.src=arr[curIndex];
        console.log(curIndex);
    },2000)
</script>
</body>
</html> -->




<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>原生JS实现图片循环切换 —— 方法二</title>
        <script type="text/javascript">
            var NowImg=1;//表示当前显示的div
            var MaxImg=4;//表示div的个数
            
            setInterval(function(){
　　　　　　　　#通过更改元素的display属性来设置显示的图片
                for(var i=1;i<=MaxImg;i++){
                    if(NowImg==i)
                        document.getElementById("div"+NowImg).style.display='block';//当前显示的div
                    else
                        document.getElementById("div"+i).style.display='none';
                }
                if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示
                    NowImg=1;
                else
                    NowImg++;//设置下一个显示的图片
            },1000)
        </script>
    </head>
    <body>
        <div>
            <div id="div1" style="display:block;"><img src="../img/2.jpg" /></div>
            <div id="div2" style="display:none;"><img src="../img/1.jpg" /></div>
            <div id="div3" style="display:none;"><img src="../img/3.jpg" /></div>
            <div id="div4" style="display:none;"><img src="../img/bg.jpg" /></div>
            </div>
        </div>
    <body>
</html>

 

posted @ 2019-08-02 08:53  coldplaycode  阅读(2341)  评论(0)  编辑  收藏  举报

coldplaycode