Manual Image Play Implementation of Image Carousel Effect in JavaScript

This example shares the specific implementation code for JavaScript image slider, for your reference, the specific content is as follows:

Part I: HTML Code Part (et.thtml):

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link type="text/css" rel="stylesheet" href="css/styleet.css">
  <script type="text/javascript" src="js/system.js"></script>
</head>
<body>
  <div id="main">
    <div id="top">
      <span id="imgL" class="span1></span>
      <img src="images/1.jpg" id="img" data-index="1" alt=""/>
      <span id="imgR" class="span2></span>
    </div>
    <div id="bottom">
      <img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/>
      <img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/>
      <img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/>
      <img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/>
      <img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/>
      <img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/>
      <img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/>
    </div>
  </div>
  <script type="text/javascript" src="js/et.js"></script>
</body>
</html>

Part II: CSS Code Part (styleet,css):

#main span{
  width: 22px;
  height: 38px;
  position: absolute;
  display: inline;-block;
  cursor: pointer;
  background: url("../images/1.png") no-repeat 0 0;
}
.span1{
  background-position: 0 0;
  left:20px;
  top: 90px;
}
.span2{
  background-position: -22px 0;
  right: 20px;
  top: 90px;
}
#main {
  width: 500px;
  margin: 20px auto;
  text-align: center;
  border: solid 2px red;
  position: relative;
}
.initClass {
  width: 50px;
  border: solid 2px #fff;
  margin: 10px 5px;
}
.focusClass {
  width: 50px;
  border: solid 2px red;
  margin: 10px 5px;
}

Three, JavaScript code section (et.js):

/**
 * Created by LuanReco on 2015/8/28.
 */
var slide = {
  arrImg: new Array('images/1.jpg, 'images/2.jpg, 'images/3.jpg, 'images/4.jpg, 'images/5.jpg, 'images/6.jpg, 'images/7.jpg'),
  initClass: 'initClass',
  focusClass: 'focusClass',
  index:1,
  arrMax:7,
  imgMain: 'img'
}
slide.top = {
  //Navigation event
  navEvent: function() {
    //Display the large image at the top based on the cumulative index
    $$(slide.imgMain).src = slide.arrImg[slide.index-1
    //Combine the navigation image name based on the focused index value
    var n='img'+slide.index;
    //Execute the corresponding navigation image click event
    $$(n).click();
  },
  //Handle the logic of the previous part of the page
  clickRight: function() {
    //Handle the event by clicking the right button
    console.log(slide.index);
    //When the index is less than or equal to the maximum number of images
    if (slide.index < slide.arrMax) {
      //Add the current index value
      slide.index++;
      slide.top.navEvent();
    }
  },
  clickLeft: function() {
    //Handle the event by clicking the right button
    console.log(slide.index);
    //When the index is less than or equal to the maximum number of images
    if (slide.index >1{
      //Add the current index value
      slide.index--;
      slide.top.navEvent();
    }
  }
}
slide.bottom = {
  initImgClass: function() {
    //Initialize the styles for all non-image elements
    for(var i=1;i<=slide.arrMax;i++{
      var n='img'+i;
      $$(n).className = slide.initClass;
    }
  },
  click: function() {
    //Handle the logic of the next part of the page
    function() {
      slide.top.clickLeft();
    }
    function() {
      slide.top.clickRight();
    }
    //获取所有底部的小图片
    for(var i=1;i<=slide.arrMax;i++{
      //为每一张图片绑定点击事件
      var n='img'+i;
      $$(n).onclick=function(){
        //初始化全部样式
        slide.bottom.initImgClass();
        //图片元素本身获取焦点样式
        this.className=slide.focusClass;
        //在上部图片中显示点击小图片对应的大图片
        $$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1
        //Re-record the corresponding index position of the focus image in the array
        slide.index=this.getAttribute('data-index');
      }
    }
  }
}
slide.autoplay={
  play:function(){
    var m=1;
    //for(var i=1;i<=slide.arrMax;i++{
      setInterval(function(){
        var n='img'+m;
        m++;
        $$(n).click();
        if(m>6)
          m=1;
      },1000)
    //}
  }
}
slide.autoplay.play();
slide.bottom.click();

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Naya Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report by email to codebox.com (replace # with @ when sending an email), and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial