Image carousel based on jQuery

I recently used image carousel, and after testing, I found a good carousel code.

 

Two URLs are recommended: http://www.jq22.com/jquery-info13688

www.jq22.com/jquery-info13688

 

Share it here: In fact, the principle is to tile a series of images of equal size, use CSS layout to display several images, and hide the rest. Use timer to realize automatic playback by calculating offset, or switch pictures by manual click event, and control the width change when click event

 

Here I write the manual click carousel:

 

First, the parent container container stores all the content, and the child container list has pictures.

<div id="container">
        <div id="list" style="left: -600px;">
            <img src="img/5.jpg" alt="1" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg" alt="4" />
            <img src="img/5.jpg" alt="5" />
            <img src="img/1.jpg" alt="5" />
        </div>
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
    </div>

 

CSS：

* {margin: 0;padding: 0;text-decoration: none;}
        body {padding: 20px;}
        #container {position: relative;width: 600px;height: 400px;
                      border: 3px solid #333;overflow: hidden;}
        #list {position: absolute;z-index: 1;width: 4200px;height: 400px;}
        #list img {float: left;width: 600px;height: 400px;}
        #buttons {position: absolute;left: 250px;bottom: 20px;z-index: 2;
                    height: 10px;width: 100px;}
        #buttons span {float: left;margin-right: 5px;width: 10px;height: 10px;
                    border: 1px solid #fff;
                                 border-radius: 50%;background: #333;cursor: pointer;}
        #buttons .on {background: orangered; }
        .arrow {
            position: absolute;
            top: 180px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;}
       .arrow:hover {
            background-color: RGBA(0, 0, 0, .7); }
       #container:hover .arrow {
            display: block;}
       #prev {
            left: 20px;}  
        #next {
            right: 20px;}

 

window.onload = function() {
            var list = document.getElementById('list');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');

            function animate(offset) {
                //The style.left is obtained, which is the distance relative to the left, so after the first picture, style.left is negative.
                //And style.left gets a string, which needs to be converted to a number with parseInt().
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
            }

            prev.onclick = function() {             
                animate(600);
            }
            next.onclick = function() {  
                animate(-600);
            }
        }

 

 We use the offset left to get the picture. When we see that the left value is less than 3600, because there is no 8th picture, there will be a blank, so here we need to make a judgment on the offset.
Add a paragraph to the animate function:

if(newLeft<-3000){
      list.style.left = -600 + 'px';
 }
 if(newLeft>-600){
      list.style.left = -3000 + 'px';
 }

 Explanation: This control starts from the beginning when the last card is turned over. You can also set the distance so that it can't turn down the page when it reaches the last one