Ручное воспроизведение изображений с помощью JavaScript для создания эффекта прокрутки изображений

В этом примере мы делимся конкретным кодом реализации слайдера изображений js, который можно использовать в качестве справки, подробности см. ниже

I. Часть 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{
  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;
}

Третий раздел: часть js кода (et.js):

/**
 * Создано LuanReco 28 августа 2015 г.
 */
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={
  //导航事件
  navEvent:function(){
    //上部分大图片显示累加后下标对应的图片
    $$(slide.imgMain).src=slide.arrImg[slide.index-1];
    //根据焦点下标值组合导航图片名称
    var n='img'+slide.index;
    //执行对应导航图片单击事件
    $$(n).click();
  },
  //处理页面上一部分的逻辑
  clickRight:function(){
    //点击向右按钮处理事件
    console.log(slide.index);
    //当下标小于或等于最大图片数量时
    if(slide.index<slide.arrMax){
      //累加当前下标值
      slide.index++;
      slide.top.navEvent();
    }
  },
  clickLeft:function(){
    //点击向右按钮处理事件
    console.log(slide.index);
    //当下标小于或等于最大图片数量时
    if(slide.index>1){
      //累加当前下标值
      slide.index--;
      slide.top.navEvent();
    }
  }
}
slide.bottom={
  initImgClass:function(){
    //初始化所有图片的样式
    for(var i=1;i<=slide.arrMax;i++){
      var n='img'+i;
      $$(n).className=slide.initClass;
    }
  },
  click:function(){
    //处理页面下一部分的逻辑
    $$('imgL').onclick=function(){
      slide.top.clickLeft();
    }
    $$('imgR').onclick=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];
        //пересоздать запись фокуса изображения в массиве
        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 (при отправке письма замените # на @) для сообщения и предоставьте соответствующие доказательства. Если подтвердится, сайт немедленно удаляет涉嫌侵权的内容。

Основной учебник

Вам может понравиться