찾다

집 >웹 프론트엔드 >JS 튜토리얼 >jquery로 캐러셀 효과를 얻는 방법

jquery로 캐러셀 효과를 얻는 방법

藏色散人
藏色散人원래의
2021-12-01 11:16:143844검색

jquery로 캐러셀 효과를 얻는 방법: 1. 마우스를 위로 바인딩하고 jquery의 hover() 메서드를 통해 이벤트 처리를 종료합니다. 2. jquery의 바인딩() 메서드를 통해 처리하는 마우스 클릭 이벤트를 앞뒤로 바인딩합니다.

jquery로 캐러셀 효과를 얻는 방법

이 글의 운영 환경: windows7 시스템, jquery-2.1.4 버전, DELL G3 컴퓨터

jquery는 캐러셀 효과를 어떻게 구현하나요?

Jquery 코드는 그림 캐러셀 효과를 구현합니다

The 기사가 잘 작성되지 않았습니다. 전문가의 조언을 부탁드립니다. 더 이상 말도 안되는 소리는 하지 마세요. 먼저 렌더링을 살펴보겠습니다.

첫 번째는 초기화 부분입니다. 첫 번째 캐러셀 사진을 제외한 모든 사진을 숨기고, 앞으로 및 앞으로 버튼을 누르면 첫 번째 색인 버튼이 활성화됩니다.

이벤트 부분: jquery의 hover() 메서드를 통해 마우스를 바인딩하고 나가기 이벤트 처리, jquery의 바인딩() 메서드는 앞으로, 뒤로 뒤집기 및 캐러셀 제어를 위한 마우스 클릭 이벤트 처리를 바인딩합니다: pre(), next(), play (), start()는 자동 캐러셀을 시작하고, stop()은 자동 캐러셀을 중지합니다.

다음 글은 다양한 효과와 편리한 구성, 확장성을 맞춤설정할 수 있는 순수 jquery 캐러셀 플러그인입니다.

전체 코드는 다음과 같습니다. 

index.html
[html] view plaincopy
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jquery轮播效果图 </title> 
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> 
<style type="text/css"> 
 * { 
 padding: 0px; 
 margin: 0px; 
 } 
 a { 
 text-decoration: none; 
 } 
 ul { 
 list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
 width: 650px; 
 height: 413px; 
 } 
 .slider { 
 text-align: center; 
 margin: 30px auto; 
 position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
 position: absolute; 
 z-index: 8; 
 } 
 .slider-panel { 
 position: absolute; 
 } 
 .slider-panel img { 
 border: none; 
 } 
 .slider-extra { 
 position: relative; 
 } 
 .slider-nav { 
 margin-left: -51px; 
 position: absolute; 
 left: 50%; 
 bottom: 4px; 
 } 
 .slider-nav li { 
 background: #3e3e3e; 
 border-radius: 50%; 
 color: #fff; 
 cursor: pointer; 
 margin: 0 2px; 
 overflow: hidden; 
 text-align: center; 
 display: inline-block; 
 height: 18px; 
 line-height: 18px; 
 width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
 background: blue; 
 } 
 .slider-page a{ 
 background: rgba(0, 0, 0, 0.2); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
 color: #fff; 
 text-align: center; 
 display: block; 
 font-family: "simsun"; 
 font-size: 22px; 
 width: 28px; 
 height: 62px; 
 line-height: 62px; 
 margin-top: -31px; 
 position: absolute; 
 top: 50%; 
 } 
 .slider-page a:HOVER { 
 background: rgba(0, 0, 0, 0.4); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
 left: 100%; 
 margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
 var length, 
  currentIndex = 0, 
  interval, 
  hasStarted = false, //是否已经开始轮播 
  t = 3000; //轮播时间间隔 
 length = $(&#39;.slider-panel&#39;).length; 
 //将除了第一张图片隐藏 
 $(&#39;.slider-panel:not(:first)&#39;).hide(); 
 //将第一个slider-item设为激活状态 
 $(&#39;.slider-item:first&#39;).addClass(&#39;slider-item-selected&#39;); 
 //隐藏向前、向后翻按钮 
 $(&#39;.slider-page&#39;).hide(); 
 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
 $(&#39;.slider-panel, .slider-pre, .slider-next&#39;).hover(function() { 
  stop(); 
  $(&#39;.slider-page&#39;).show(); 
 }, function() { 
  $(&#39;.slider-page&#39;).hide(); 
  start(); 
 }); 
 $(&#39;.slider-item&#39;).hover(function(e) { 
  stop(); 
  var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
  currentIndex = $(this).index(); 
  play(preIndex, currentIndex); 
 }, function() { 
  start(); 
 }); 
 $(&#39;.slider-pre&#39;).unbind(&#39;click&#39;); 
 $(&#39;.slider-pre&#39;).bind(&#39;click&#39;, function() { 
  pre(); 
 }); 
 $(&#39;.slider-next&#39;).unbind(&#39;click&#39;); 
 $(&#39;.slider-next&#39;).bind(&#39;click&#39;, function() { 
  next(); 
 }); 
 /** 
  * 向前翻页 
  */ 
 function pre() { 
  var preIndex = currentIndex; 
  currentIndex = (--currentIndex + length) % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 向后翻页 
  */ 
 function next() { 
  var preIndex = currentIndex; 
  currentIndex = ++currentIndex % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 从preIndex页翻到currentIndex页 
  * preIndex 整数，翻页的起始页 
  * currentIndex 整数，翻到的那页 
  */ 
 function play(preIndex, currentIndex) { 
  $(&#39;.slider-panel&#39;).eq(preIndex).fadeOut(500) 
  .parent().children().eq(currentIndex).fadeIn(1000); 
  $(&#39;.slider-item&#39;).removeClass(&#39;slider-item-selected&#39;); 
  $(&#39;.slider-item&#39;).eq(currentIndex).addClass(&#39;slider-item-selected&#39;); 
 } 
 /** 
  * 开始轮播 
  */ 
 function start() { 
  if(!hasStarted) { 
  hasStarted = true; 
  interval = setInterval(next, t); 
  } 
 } 
 /** 
  * 停止轮播 
  */ 
 function stop() { 
  clearInterval(interval); 
  hasStarted = false; 
 } 
 //开始轮播 
 start(); 
 }); 
</script> 
</head> 
<body> 
 <div class="slider"> 
 <ul class="slider-main"> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/1.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/2.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/3.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/4.jpg"></a> 
  </li> 
 </ul> 
 <div class="slider-extra"> 
  <ul class="slider-nav"> 
  <li class="slider-item">1</li> 
  <li class="slider-item">2</li> 
  <li class="slider-item">3</li> 
  <li class="slider-item">4</li> 
  </ul> 
  <div class="slider-page"> 
  <a class="slider-pre" href="javascript:;;"><</a> 
  <a class="slider-next" href="javascript:;;">></a> 
  </div> 
 </div> 
 </div> 
</body> 
</html>

이제 간단한 jquery 캐러셀 효과가 완성되었습니다. 물론 아직 개선이 필요한 부분이 많습니다.

추천 학습: "jquery 비디오 튜토리얼"

위 내용은 jquery로 캐러셀 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery의 마지막 열을 제외한 다른 요소를 선택하는 방법다음 기사：jquery의 마지막 열을 제외한 다른 요소를 선택하는 방법

관련 기사

더보기