집 >웹 프론트엔드 >JS 튜토리얼 >네이티브 js는 자동 캐러셀 차트를 구현합니다.

네이티브 js는 자동 캐러셀 차트를 구현합니다.

小云云원래의: 2018-03-22 17:05:534265검색

캐러셀 이미지는 현재 웹사이트 페이지에서 가장 일반적인 효과 중 하나입니다. Taobao, JD.com 등과 같은 많은 웹사이트에서 사용됩니다. 일부 자동 탭도 필요하며 반복성이 높습니다. 여기에서 공유하세요. js 네이티브 코드를 사용하여 캐러셀 이미지의 일반적인 효과를 얻으세요!

캐러셀 이미지의 원리

CSS 레이아웃을 사용하여 동일한 크기의 일련의 이미지를 타일링하여 이미지 하나만 표시하고 나머지는 숨깁니다. 오프셋을 계산하여 자동 재생을 실현하려면 타이머를 사용하십시오.

Html 레이아웃

먼저 상위 컨테이너 배너는 모든 콘텐츠를 저장하고 하위 컨테이너 img-list는 이미지를 저장합니다. 하위 컨테이너 목록에는 버튼 도트가 저장됩니다. 점에 배경 이미지를 사용했습니다!

<p id="banner">
    <ul id="img-list">  
       
        <li><img src="images/banner1.png" alt="1"/></li>
        <li><img src="images/banner2.jpg" alt="2"/></li>
        <li><img src="images/banner3.png" alt="3"/></li>

    </ul>
    <p id="list">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
    </p>
</p>

css 수정

1. 박스 모델, 문서 흐름, 절대 위치 문제 이해.

2. 사진의 너비와 높이가 고정되어 있습니다. 먼저 img-list에서 세 사진의 전체 너비를 설정하고 Overflow: Hidden;을 사용하여 초과분을 숨깁니다. 오른쪽 이미지 아래에 li 설정을 로드하고 플로팅합니다.

3. 목록 범위의 너비와 높이를 수정하고 배경 이미지를 지정합니다. 첫 번째 이미지에 기본 노란색 점 이미지를 설정합니다.

#banner {
    width:100%;
    padding:0;
    clear: both;
    position: relative;
    height: 400px;
    z-index:1;
}

#img-list {
    display: block;
    width:5760px;
    height: 400px;
    overflow: hidden;
    z-index:1;
    position: relative;
}
#img-list li{
    float: left;
    width:100%;
    height: 400px;
    overflow: hidden;
    /* position: absolute;
    top:0;
    left:0; */
    z-index: 2;
}
#list {
    width:100%;
    height:18px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    z-index: 100;
}
#list > span {
    width:18px;
    height: 18px;
    overflow: hidden;
    display: inline-block;
    margin:0 2px;
    background: url(../images/yuan.png);
    cursor: pointer;
}
#list .on {
    background: url(../images/huanyu.png);
}

JS 효과

1. 먼저 자동 재생 기능을 설정합니다

2. 그런 다음 마우스가 컨테이너 위로 미끄러지면 재생이 중지되고 마우스가 전체 컨테이너를 벗어나면 다음 사진으로 계속 재생됩니다.

3. 자동 재생 기능을 정의하고 호출합니다

var banner=document.getElementById(&#39;banner&#39;);
  var imglist=document.getElementById(&#39;img-list&#39;).getElementsByTagName("li");
  var list=document.getElementById(&#39;list&#39;).getElementsByTagName(&#39;span&#39;);
var index=0;
  var timer=null;
 //设置自动播放函数
  function autoPlay () {
      if (++index >= imglist.length) {index = 0};
      changeImg(index);
  }

  // 鼠标划过整个容器时停止自动播放
  banner.onmouseover = function () {
      clearInterval(timer);
  }

  // 鼠标离开整个容器时继续播放至下一张
  banner.onmouseout=function(){
      timer=setInterval(autoPlay,2000);
  }
  / 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);

그런 다음 사진의 전환 기능을 정의합니다

// 定义图片切换函数
  function changeImg (curIndex) {
      for (var i = 0; i < imglist.length; i++) {

          imglist[i].style.display = "none";
          list[i].className = "";
      }
      imglist[curIndex].style.display = "block";
      list[curIndex].className = "on";
  }

마지막으로 모든 디지털 내비게이션을 탐색하여 해당 사진으로 스와이프 전환하고 해당 사진의 색인 값을 얻어야 합니다

for (var i = 0; i < list.length; i++) {
  list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
 };

캐러셀의 모든 코드가 완성되었습니다!

네이티브 js는 자동 캐러셀 차트를 구현합니다.

캐러셀 이미지의 원리

Html 레이아웃

css 수정

JS 효과

관련 기사