JavaScript에서 이미지 슬라이드 쇼 효과를 수동으로 재생하는 방법

이 글은 JavaScript 이미지 슬라이드 구현 코드를 공유합니다.

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;
}

3. js 코드 부분（et.js）：

/**
 * LuanReco에서 만들었습니다. 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={
  //탐색 이벤트
  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#w로 이메일을 보내 주시기 바랍니다.3codebox.com（메일을 보내는 경우 #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 실제로 확인되면 이 사이트는 즉시 의심스러운 저작권 내용을 삭제할 것입니다.

기본 튜토리얼

좋아하는 것