jquery로 캐러셀 효과를 얻는 방법: 1. 마우스를 위로 바인딩하고 jquery의 hover() 메서드를 통해 이벤트 처리를 종료합니다. 2. 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 = $('.slider-panel').length; //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $('.slider-page').hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', 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) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } /** * 开始轮播 */ 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!