Pure css, JavaScript, jQuery simple Carousel Figure

 

 

　　Or complete a click can be automatically switched digital FIG carousel

 

HTML code only needs a div contains a picture and a list of our main idea is by clicking on the corresponding number, change the path of the picture.

There are four pictures img folder named img1.png, img2.png, img3.png, img4.png, in order to replace the picture as long as the path to change the picture on it

css code list just need to put the picture above it

         <div>        
            <img src="img/img1.png" class="banner">            
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

*{
                margin: 0;
                padding: 0;
            }
            div{
                width: 210px;
                margin:20px auto;
                /* border: 1px red solid; */
                
                position: relative;
            }
            li{
                list-style: none;
                float: left;
                width: 20px;
                height: 20px;
                background-color: green;
                margin-left: 12px;
                text-align: center;
                line-height: 20px;
                color: white;
                border-radius: 50%; // li becomes circular
                -size font: 10px; 
                Cursor: // pointer moves the mouse pointer changes li      
            } 
            
            
            ul { 
                position: Absolute; // ul positioned beneath the image 
                Top: 250px; 
                left: 30px; 
            }        

The most important is the way we jQuery

    // set a variable, a starting value, i.e. the first image 
                var index = 1 ;   
             // set the timer function, performed once every 2 seconds 
            var Timer = the setInterval ( "AA ()", 2000 );                
             // the method of the timing function call 
            function AA () {
                 // ternary operator, the start value when the index is equal to 1, index + 1, followed by +1 until when index = 4, reassign an index 
                index = (index $ == ( "li") length) 1: index + 1.? ;  
                 // set the image src attribute 
                $ ( "banner.") attr ({ "src":. "img / img" + index + ". png" })     
            } 
            $ (Document).READY ( function () {
             // When we move the mouse li
                $ ( "Li") hover (. function () { 
                    the clearInterval (Timer); // Clear the timing function 
                    $ ( "Banner.") attr ({ "the src":. "IMG / IMG" + $ ( the this ) .text () +. "PNG"}) // get the current text li is provided image src value 
                    
                }, function () { // mouse out restart timing function 
                  timer = the setInterval ( "AA ()", 2000 ); 
                
                } ) 
                
            })
            

 

Many of the project can be revised and improved, such as pictures can be placed in a path array is also possible.

There are many ways carousel map, some of which are put directly into the page all the pictures, and then let the picture show and hide