Implémentation manuelle de la lecture d'images pour réaliser l'effet de diaporama d'images en JavaScript

本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下

一、html代码部分（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>

二、css代码部分（styleet,css）:

#main span{
  largeur: 22px;
  height: 38px;
  position: absolute;
  display: inline-block;
  cursor: pointer;
  background: url("../images/1.png") no-repeat 0 0;
}
.span1{
  background-position: 0 0;
  gauche:20px;
  top: 90px;
}
.span2{
  background-position: -22px 0;
  droite: 20px;
  top: 90px;
}
#main {
  largeur: 500px;
  marge: 20px auto;
  text-align: center;
  bordure: solide 2px rouge;
  position: relative;
}
.initClass {
  largeur: 50px;
  bordure: solide 2px #fff;
  marge: 10px 5px;
}
.focusClass {
  largeur: 50px;
  bordure: solide 2px rouge;
  marge: 10px 5px;
}

Troisième partie : partie de code JavaScript (et.js) :

/**
 * Créé par LuanReco le 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 = {
  //événement de navigation
  navEvent: function() {
    //afficher l'image principale en haut, correspondant à l'index ajouté
    $$(slide.imgMain).src = slide.arrImg[slide.index-1
    //combiner la valeur de l'index de focus pour former le nom de l'image de navigation
    var n='img'+slide.index;
    //exécuter l'événement de clic sur l'image de navigation correspondante
    $$(n).click();
  },
  //traiter la logique de la partie précédente de la page
  clickRight: function() {
    //gérer l'événement du clic sur le bouton vers la droite
    console.log(slide.index);
    //lorsque l'index est inférieur ou égal au nombre maximum d'images
    if (slide.index < slide.arrMax) {
      //ajouter la valeur de l'index actuel
      slide.index++;
      slide.top.navEvent();
    }
  },
  clickLeft: function() {
    //gérer l'événement du clic sur le bouton vers la droite
    console.log(slide.index);
    //lorsque l'index est inférieur ou égal au nombre maximum d'images
    if (slide.index >1{
      //ajouter la valeur de l'index actuel
      slide.index--;
      slide.top.navEvent();
    }
  }
}
slide.bottom = {
  initImgClass: function() {
    //initialiser le style de toutes les images non alignées
    for(var i=1;i<=slide.arrMax;i++{
      var n='img'+i;
      $$(n).className = slide.initClass;
    }
  },
  click: function() {
    //traiter la logique de la partie suivante de la 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
        //Enregistrer à nouveau la position correspondante de l'image de focus dans l'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();

Voici la totalité du contenu de cet article, j'espère qu'il vous aidera dans vos études, et j'espère que vous soutenrez également le tutoriel d'alarme.

Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué par les utilisateurs d'Internet et téléchargé spontanément. Ce site ne possède pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé enfreindre les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (au moment de l'envoi d'un e-mail, veuillez remplacer # par @ pour faire une plainte, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.)

Tutoriel de base