Manuelles Abspielen von Bildern mit JavaScript zum Erstellen eines Bildergalerie-Effekts

本文实例为大家分享了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{
  width: 22px;
  height: 38px;
  position: absolute;
  display: inline;-block;
  cursor: pointer;
  background: url("../images/1.png") no-repeat 0 0;
}
.span1{
  Hintergrund-position: 0 0;
  links:20px;
  top: 90px;
}
.span2{
  Hintergrund-position: -22px 0;
  right: 20px;
  top: 90px;
}
#main {
  width: 500px;
  margin: 20px auto;
  text-ausrichten: zentriert;
  border: fest 2px red;
  position: relativer Ort;
}
.initClass {
  width: 50px;
  border: fest 2px #fff;
  margin: 10px 5px;
}
.focusClass {
  width: 50px;
  border: fest 2px red;
  margin: 10px 5px;
}

Dritter Abschnitt: js-Code (et.js):

/**
 * Erstellt von LuanReco am 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 = {
  //Navigationsereignis
  navEvent: function() {
    //Großes Bild oben zeigt das Bild an, das dem summierten Indikator entspricht
    $$(slide.imgMain).src = slide.arrImg[slide.index-1];
    //Navigationsbildname aus Fokusindikatorwert kombinieren
    var n='img'+slide.index;
    //Klickereignis der entsprechenden Navigationsbilder ausführen
    $$(n).click();
  },
  //Logik für den vorherigen Teil der Seite verarbeiten
  clickRight: function() {
    //Klick auf den rechten Knopf verarbeiten
    console.log(slide.index);
    //Wenn der Indikator kleiner oder gleich der maximalen Anzahl von Bildern ist
    if(slide.index < slide.arrMax) {
      //Aktuellen Indikatorwert summieren
      slide.index++;
      slide.top.navEvent();
    }
  },
  clickLeft: function() {
    //Klick auf den rechten Knopf verarbeiten
    console.log(slide.index);
    //Wenn der Indikator kleiner oder gleich der maximalen Anzahl von Bildern ist
    if(slide.index>1{
      //Aktuellen Indikatorwert summieren
      slide.index--;
      slide.top.navEvent();
    }
  }
}
slide.bottom = {
  initImgClass: function() {
    //Stile für alle nicht initiierten Bilder initialisieren
    for(var i=1;i<=slide.arrMax;i++{
      var n='img'+i;
      $$(n).className = slide.initClass;
    }
  },
  click: function() {
    //Logik für den nächsten Teil der Seite verarbeiten
    Funktion() {
      slide.top.clickLeft();
    }
    Funktion() {
      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];
        //重新记录焦点图片在数组中的对应下标位置
        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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com (邮件发送时，请将#更换为@进行举报，并提供相关证据，一经查实，本站将立即删除涉嫌侵权内容。)

Grund教程

Empfohlene Artikel