jQuery 영상 전시 효과 구현

본 논문 의 사례 는 jQuery 가 영상 전 시 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과:
사용 자 는 영상 이 보 여 주 는 좌우 스크롤 을 제어 하기 위해 왼쪽 상단 의 좌우 화살 표를 누 를 수 있 습 니 다.오른쪽 화살 표를 누 르 면 아래 전시 영상 은 왼쪽으로 스크롤 되 며 새로운 영상 전시 회 는 스크롤 방식 으로 표 시 됩 니 다.

생각:
4.567917.영상 전시 내용 이 마지막 지면 에 있 을 때 뒤로 넘 어가 면 첫 번 째 지면 으로 넘 어가 야 한다4.567917.영상 전시 내용 이 첫 번 째 지면 에 있 을 때 앞으로 나 아가 면 마지막 지면 으로 넘 어가 야 한다

왼쪽 상단 의 화살표 옆 에 있 는 파란색 원점 은 애니메이션 과 함께 전환 되 는데 이것 은 현재 처 한 지면 을 대표 합 니 다

HTML 구조

<div class="v_show">
 <div class="v_caption">
 <h2 class="cartoon" title="    ">    </h2>
 <div class="highlight_tip">
  <span class="current">1</span><span>2</span><span>3</span><span>4</span>
 </div>
 <div class="change_btn">
  <span class="prev" >   </span>
  <span class="next">   </span>
 </div>
 <em><a href="#" >  >></a></em>
 </div>
 <div class="v_content">
 <div class="v_content_list">
  <ul>
  <li><a href="#" ><img src="img/01.jpg" alt="   " /></a><h4><a href="#" >   </a></h4><span>  :<em>28,276</em></span></li>
  <!--    -->
  <li><a href="#" ><img src="img/04.jpg" alt="  " /></a><h4><a href="#" >  </a></h4><span>   <em>57,865</em></span></li>
  </ul>
 </div>
 </div>
</div>

jQuery
(1)먼저 jQuery 선택 기 를 통 해 오른쪽 화살표 의 요 소 를 가 져 온 다음 click 이 벤트 를 연결 합 니 다.'오른쪽 화살표'와'영상 전시 구역'이 같은 조상 요소 아래 있 기 때문에'오른쪽 화살표'를 통 해'영상 전시 구역'을 찾 을 수 있다.먼저 오른쪽 화살표'의 조상 요 소 를 얻 은 다음 조상 요소 에서'영상 전시 구역'을 찾는다.
jQuery 코드 는 다음 과 같 습 니 다.

$("span.next").click(function(){ //  click  
  var $parent = $(this).parents("div.v_show");//              
  var $v_show = $parent.find("div.v_content_list"); //   “        ”
  var $v_content = $parent.find("div.v_content"); //   “        ”   DIV  
}）

해당 요 소 를 찾 으 면 해당 요소 에 애니메이션 효 과 를 추가 할 수 있 습 니 다.animate()방법 으로'영상 전시 구역'의 left 스타일 속성의 값 을 제어 하여 애니메이션 효 과 를 얻 을 수 있 습 니 다.left 의 값 은 각 판 의 너비 와 같다.
width()방법 으로 각 판 의 폭 을 얻 을 수 있 습 니 다.

var v_width = $v_content.width();

이 단 계 를 완성 한 후,이 코드 는 다음 과 같 습 니 다.

$(function() {
 $("span.next").click(function() {
 var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.v_content_list"); //          
 var $v_content = $parent.find('div.v_content'); //           div
 var v_width = $v_content.width(); //         ，   

 if (         ) {
  $v_show.animate({left:'0px'},"slow");
 } else {
  $v_show.animate({left:'-='+v_width},"slow");
 }
 });
});

(2)현재 의 문 제 는 애니메이션 이 마지막 판 에 도 착 했 음 을 어떻게 알 수 있 습 니까?영상 전시 구역'각 지면 에 영상 사진 4 장 이 놓 여 있 는데 영상 사진 의 총 수 를 얻 은 다음 총 수 를 4 로 나 누 면 전체 지면 수 를 얻 을 수 있다.마지막 판 에 도착 하기 전에 현재 판 수 를 바탕 으로 1 을 더 해 야 합 니 다.마지막 판 에 도 착 했 을 때(즉,현재 판 수 는 전체 판 수 와 같 습 니 다)현재 판 수 를 1 로 설정 하여 애니메이션 을 다시 시작 해 야 합 니 다.

$(function() {
 var page = 1; //        ，      
 var i = 4;
 $("span.next").click(function() {
 var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.v_content_list"); //          
 var $v_content = $parent.find('div.v_content'); //           div
 var v_width = $v_content.width(); //         ，   
 var len = $v_show.find('li').length; //     
 var page_count = Math.ceil(len / i); //      ，            
 if (page==page_count) {
  $v_show.animate({left:'0px'},"slow");
 } else {
  $v_show.animate({left:'-='+v_width},"slow");
 }
 });
});

(3)이 단계 가 완성 되 려 면 왼쪽 상단 의 화살표 옆 에 있 는 파란색 원점 이 애니메이션 과 함께 전환 되 어 현재 있 는 지면 을 표시 해 야 합 니 다.현재 판 을 대표 하 는'파란색 원점'에 스타일'current'를 추가 하면 됩 니 다.
현재 판 수 를 알 고 싶다 면 방법 은 간단 합 니 다.변수 페이지 의 값 은 판 수 입 니 다.eq()는 방법의 아래 표 시 는 0 에서 시작 하기 때문에 page 에서 1 을 빼 면 현재 판 수 를 얻 을 수 있 습 니 다.그리고 아래 코드 를 사용 하여 현재 판 을 표시 합 니 다.

$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

(4)현재 코드 를 실행 하 는데 아무런 문제 가 발견 되 지 않 았 습 니 다.그러나'오른쪽으로'단 추 를 빨리 누 르 면 문제 가 발생 합 니 다.커서 를 놓 고 그림 이 굴 러 갑 니 다.
이곳 의 문 제 는 애니메이션 대기 열 로 인 한 것 이다.오른쪽 단 추 를 빠르게 눌 렀 을 때 발생 하 는 애니메이션 을 누 르 면 애니메이션 대기 열 에 추가 되 어 상기 문제 가 발생 합 니 다.다음 과 같이 해결 합 니 다.

if( !$v_show.is(":animated") ){ } //  “        ”        

최종 jQquery 코드 는 다음 과 같 습 니 다.

$(function(){
 var page = 1;
 var i = 4; //   4   
 //     
 $("span.next").click(function(){ //  click  
  var $parent = $(this).parents("div.v_show");//              
  var $v_show = $parent.find("div.v_content_list"); //   “        ”
  var $v_content = $parent.find("div.v_content"); //   “        ”   DIV  
  var v_width = $v_content.width() ;
  var len = $v_show.find("li").length;
  var page_count = Math.ceil(len / i) ; //      ，            
  if( !$v_show.is(":animated") ){ //  “        ”        
  if( page == page_count ){ //          ,     ，          。
  $v_show.animate({ left : '0px'}, "slow"); //    left ，        
  page = 1;
  }else{
  $v_show.animate({ left : '-='+v_width }, "slow"); //    left ，         
  page++;
  }
  }
  $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 });
 //     
 $("span.prev").click(function(){
  var $parent = $(this).parents("div.v_show");//              
  var $v_show = $parent.find("div.v_content_list"); //   “        ”
  var $v_content = $parent.find("div.v_content"); //   “        ”   DIV  
  var v_width = $v_content.width();
  var len = $v_show.find("li").length;
  var page_count = Math.ceil(len / i) ; //      ，            
  if( !$v_show.is(":animated") ){ //  “        ”        
  if( page == 1 ){ //         ,     ，           。
  $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
  page = page_count;
  }else{
  $v_show.animate({ left : '+='+v_width }, "slow");
  page--;
  }
 }
 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 });
});

전체 코드 다운로드 주소:jQuery 영상 전시
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.