Native js implements automatic carousel chart

Carousel images are one of the most common effects on website pages now, and are used on many websites, such as Taobao, JD.com, etc. Some automatic tabs are also required and are highly repeatable. Share here, use js native code to achieve the common effects of carousel images!

The principle of carousel image

A series of images of equal size are tiled, using CSS layout to display only one image and hide the rest. Use timer to realize automatic playback by calculating offset.

Html layout

First, the parent container banner stores all content, and the child container img-list stores images. The subcontainer list stores button dots. I used a background image for the dots!

<p id="banner">
    <ul id="img-list">  
       
        <li><img src="images/banner1.png" alt="1"/></li>
        <li><img src="images/banner2.jpg" alt="2"/></li>
        <li><img src="images/banner3.png" alt="3"/></li>

    </ul>
    <p id="list">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
    </p>
</p>

css modification

1. Understanding the box model, document flow, and absolute positioning issues.

2. Pictures have fixed width and height. First set the total width of the three pictures in img-list, and hide the excess with overflow: hidden;! Load and float the li setting under the image to the right.

3. Fix the width and height in the list span and give it a background image. Set a default yellow dot image on the first image.

#banner {
    width:100%;
    padding:0;
    clear: both;
    position: relative;
    height: 400px;
    z-index:1;
}

#img-list {
    display: block;
    width:5760px;
    height: 400px;
    overflow: hidden;
    z-index:1;
    position: relative;
}
#img-list li{
    float: left;
    width:100%;
    height: 400px;
    overflow: hidden;
    /* position: absolute;
    top:0;
    left:0; */
    z-index: 2;
}
#list {
    width:100%;
    height:18px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    z-index: 100;
}
#list > span {
    width:18px;
    height: 18px;
    overflow: hidden;
    display: inline-block;
    margin:0 2px;
    background: url(../images/yuan.png);
    cursor: pointer;
}
#list .on {
    background: url(../images/huanyu.png);
}

JS effect

1. First, we set the autoplay function

2. Then the playback stops when the mouse slides over the container, and continues to play when the mouse leaves the entire container. Next one.

3. Then define and call the autoplay function

var banner=document.getElementById('banner');
  var imglist=document.getElementById('img-list').getElementsByTagName("li");
  var list=document.getElementById('list').getElementsByTagName('span');
var index=0;
  var timer=null;
 //设置自动播放函数
  function autoPlay () {
      if (++index >= imglist.length) {index = 0};
      changeImg(index);
  }

  // 鼠标划过整个容器时停止自动播放
  banner.onmouseover = function () {
      clearInterval(timer);
  }

  // 鼠标离开整个容器时继续播放至下一张
  banner.onmouseout=function(){
      timer=setInterval(autoPlay,2000);
  }
  / 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);

Then define the switching function of the picture

// 定义图片切换函数
  function changeImg (curIndex) {
      for (var i = 0; i < imglist.length; i++) {

          imglist[i].style.display = "none";
          list[i].className = "";
      }
      imglist[curIndex].style.display = "block";
      list[curIndex].className = "on";
  }

Finally, traverse all digital navigation to achieve switching to the corresponding picture by swiping across it. Get its index value

for (var i = 0; i < list.length; i++) {
  list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
 };

At this point, all the code for our carousel is complete!

Related recommendations:

WeChat applet carousel chart function development example

jquery implements PC-side carousel chart code

Two js ways to implement carousel images

The above is the detailed content of Native js implements automatic carousel chart. For more information, please follow other related articles on the PHP Chinese website!