Make pictures jump javascript picture carousel effects_javascript skills-JS Tutorial-php.cn

Make pictures jump javascript picture carousel effects_javascript skills

WBOY

Release： 2016-05-16 15:15:16

Original

1741 people have browsed it

The picture carousel effect is almost a must-have effect on the homepage of the current website. So I will explain the simple implementation of this effect from three aspects.

The picture jumps
Implementation of picture sequence control
Implementation of front and rear button control

In this article, let’s look at the pictures switching according to the interval.

Let’s complete the structure code first, I won’t explain it in detail. Let’s see the effect

The code is as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

Copy after login

Okay, now let’s control the image jump through JS.

First we need to find the location of the picture. Here we use ul to layout, so first we have to find the number of LI under UL

Then let the pictures be displayed one by one. We used the window mode, which is the mask layer mode. #slider is a window, ul is the scenery outside the window, and the scenery ul is arranged horizontally

Then the outside scenery is displayed as the size of the window, that is, each picture is used as the window scenery each time. Here, the size of the picture is controlled to be the same size as the window.

The above explains a concept, that is, layout processing. Next, we control JS. To achieve different display intervals of pictures, we need to use JS’s setInterval or setTimeout. Here we use setInterval (because this is used Easy to get up.)

Every time we jump, we control the left of the position of UL, so that the scenery under ul can be displayed differently every time, and this left is determined according to the width of the window. The first picture Of course left is -800 * 0, the second is -800*1, the third is -800*2...and so on. Then we can get the following code

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

Copy after login

The JS code looks very simple like this. Here I set a 2-second jump sequence, and then after the number of jumps is greater than or equal to the number of pictures, let it return to the first picture.

I hope this article will be helpful to everyone learning JavaScript programming.