Native JS achieve picture Cycle

<!-- <!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 ; 
    the setInterval ( function () { 
　　　　# modified by the image array src attribute
         var obj = document.getElementById ( "obj" );
         // var IMG = document.getElementById ( "IMG"); 
        IF (== arr.length-curIndex. 1 ) { 
            curIndex = 0 ; 
        } 
        the else { 
            curIndex + =. 1 ; 
        } 
        obj.src = ARR [curIndex]; 
        the console.log (curIndex); 
    }, 2000 )
</ Script> 
</ body> 
</ HTML> -> 




! <DOCTYPE HTML> 
<HTML> 
    <head> 
        <Meta charset = "UTF-. 8" /> 
        <title> JS original pictures by Cycle - Method II </ title> 
        <Script type = "text / JavaScript"> var NowImg =. 1; // represents the currently displayed div var MaxImg =. 4; // indicates the number of div             
            the setInterval ( function () { 　　　　　　　　# display element by changing attribute set to display images
                 for ( var I =. 1; I <= MaxImg; I ++ ) {
                     IF (NowImg == I) 
                        Document.getElementById (
            
            

"div" + NowImg) .style.display = 'Block'; // div currently displayed 
                    the else 
                        document.getElementById ( "div" + I) = .style.display 'none' ; 
                } 
                IF (NowImg == MaxImg) / / Analyzing current div is the last one, if it is a re-cycle from the first display 
                    NowImg =. 1 ;
                 the else 
                    NowImg ++; // image display a next set 
            }, 1000 )
         </ Script> 
    </ head> 
    <body > 
        <div> 
            <div ID = "DIV1" style = "the display: Block;"> <IMG the src = "../ IMG / 2.jpg" /> </ div> 
            <div ID = "Div2" style = "the display: none;"> <IMG the 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>
Native JS achieve picture Cycle

Guess you like
