자바스크립트 이미지 캐러셀 효과_javascript 기술을 쉽게 구현-JS 튜토리얼-php.cn

자바스크립트 이미지 캐러셀 효과_javascript 기술을 쉽게 구현

WBOY

풀어 주다： 2016-05-16 15:20:10

원래의

1338명이 탐색했습니다.

본 글의 예시에서는 자바스크립트 이미지 캐러셀 효과에 대한 자세한 코드와 구현 아이디어를 소개하고 있으며, 참고용으로 모두와 공유합니다

먼저 렌더링을 살펴보겠습니다.

구체 코드:

1. HTML 코드 분석

<body> 
  <div class="dota"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/1.jpg"/></a></li> 
      <li><a href="#"><img src="images/2.jpg"/></a></li> 
      <li><a href="#"><img src="images/3.jpg"/></a></li> 
      <li><a href="#"><img src="images/4.jpg"/></a></li> 
      <li><a href="#"><img src="images/5.jpg"/></a></li> 
    </ul> 
    <ul id="indicator"> 
      <li class="current"><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用，它涵盖了</a></li> 
    </ul> 
  </div> 
</body>

로그인 후 복사

이 효과의 계층 구조는 비교적 명확합니다.
1. 클래스 데이터가 있는 div는 가장 바깥쪽 컨테이너이며 전체 렌더링의 표시 위치를 제어하는 데 사용할 수 있습니다.

2. 콘텐츠 ID가 있는 ul은 왼쪽 스크롤 이미지를 저장하는 데 사용됩니다.

3. 인디케이터의 ID를 가진 ul은 오른쪽에 인디케이터 바를 표시하는 데 사용됩니다.

2. CSS 코드

*{margin: 0; padding: 0;} 
 
    img{ 
      border:0; 
    } 
 
    .dota{ 
      width:570px; 
      height: 230px; 
      margin:100px auto; 
      position: relative; 
      overflow: hidden; 
    } 
 
    .dota #content{ 
      float: left; 
      list-style: none; 
      position: absolute; 
      width:380px; 
      height:230px; 
    } 
    .dota #content img{ 
      width:380px; 
      height:230px;  
    } 
    .dota #indicator{ 
      float: right; 
      list-style: none; 
      width:180px; 
      height:220px; 
      padding: 5px; 
      background-color: #100F13; 
    } 
    .dota #indicator li{ 
      width: 180px; 
      height: 44px; 
      background: url(images/anniu.png) 0 -44px; 
    } 
 
    .dota #indicator li.current{ 
      background-position: 0 0; 
    } 
 
    .dota #indicator li a{ 
      display: block; 
      width: 160px; 
      height: 34px; 
      padding: 5px 0 5px 25px; 
    } 
 
    .dota #indicator li a:link , .dota #indicator li a:visited{ 
      text-decoration: none; 
      color: #686477; 
      font: 12px/145% "宋体"; 
    }

로그인 후 복사

여기서 표시기의 li 코드를 설명합니다.
.dota #indicator li의 CSS 코드는 오른쪽 표시줄에 각 항목을 설정하는 것입니다. 여기서는 background 속성을 사용하는데, 이는 li의 배경이 그림이라는 의미입니다. 준비한 사진은 다음과 같습니다.

이 준비된 사진의 크기는 180 * 88이고, .dota #indicator li의 배경 속성에 의해 설정된 위치 속성 크기는 0 -44px입니다. 이는 캡처된 이미지의 하단 부분이므로 배경이 모두 포함됩니다. 표시기 그림은 아래쪽 절반의 어두운 부분을 보여주며 .dota #indicator li.current 의 위치 속성 크기는 0 0이므로 기본적으로 첫 번째 표시기가 강조 표시되고 나머지는 어두운 부분으로 표시됩니다. 그런 다음 JQuery 코드를 사용하여 "누가"에 대한 현재 속성을 제어하여 선택한 상태를 전환합니다.

3. JQuery 코드

<script type="text/javascript"> 
 
    $(function(){ 
 
      var nowImage = 0; 
 
      /* 为定时动画服务 */ 
      $(".dota #content li").first().clone().appendTo($(".dota #content")); 
 
      var timer = setInterval(autoAnimate, 1500); 
 
      $(".dota").mouseenter(function(){ 
        clearInterval(timer); 
      }).mouseleave(function(){ 
        timer = setInterval(autoAnimate, 1500); 
      });; 
 
      $(".dota #indicator li").mouseenter(function(){ 
        $(this).addClass("current").siblings().removeClass("current"); 
        nowImage = $(this).index(); 
        /*stop() 可以立刻清楚以前的动画，防止动画叠加*/ 
        $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 
      }); 
 
      function autoAnimate(){ 
        if(nowImage == 4){ 
          nowImage = 0; 
           
          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
          $(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){ 
            $(".dota #content").css("top",0); 
          }); 
        } 
        else{ 
          nowImage++; 
          $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 
          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
          } 
      } 
 
    }); 
 
  </script>

로그인 후 복사

위 내용은 자바스크립트 이미지 캐러셀 효과를 쉽게 구현하기 위한 상세 코드입니다. 모든 분들의 학습에 도움이 되길 바랍니다.