이번에는 회전 슬라이드 캐러셀 효과를 구현하기 위한 jQuery를 소개하겠습니다.(코드 포함) jQuery에서 회전 슬라이드 캐러셀 효과를 구현하기 위한 주의 사항은 무엇입니까? ㅋㅋㅋ lt; 비압축 8kb)
빌트 jQuery통합 이미지 사전 로드
<script src="js/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.anoslide.js"></script>
.carousel { position: relative; min-height: 20px; height: auto !important; height: 20px; background: url(images/loader.gif) center center no-repeat; } .carousel .next, .carousel .prev { display: none; width: 56px; height: 56px; position: absolute; bottom: 20px; left: 50%; margin-top: -28px; z-index: 9999; cursor: pointer; } .carousel .prev { margin-left: -60px; background: url(images/prev.png) 0 0 no-repeat; } .carousel .next { margin-right: -60px; background: url(images/next.png) 0 0 no-repeat; } .carousel li { display: none; } .carousel li img { width: 100%; height: auto; } .paging { position: absolute; z-index: 9998; } .paging > a { display: block; cursor: pointer; width: 40px; height: 40px; float: left; background: url(images/dots.png) 0px -40px no-repeat; } .paging > a:hover, .paging > a.current { background: url(images/dots.png) 0px 0px no-repeat; } .badge { display: block; width: 104px; height: 104px; background: url(images/badge.png) 0 0 no-repeat; z-index: 9000; position: absolute; top: -3px; left: -3px; } img { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -o-user-select: none; user-select: none; }
$('.carousel ul').anoSlide( { items: 1, speed: 500, prev: 'a.prev', next: 'a.next', lazy: true, auto: 4000 }) html <p class="carousel"> <a class="prev"></a> <ul> <li>Content goes here</li> <li>Content goes here</li> <li>Content goes here</li> </ul> <a class="next"></a> </p>
JS
$('.carousel[data-mixed] ul').anoSlide( { items: 5, speed: 500, prev: 'a.prev[data-prev]', next: 'a.next[data-next]', lazy: true, delay: 100})
HTML
<p class="carousel" data-mixed=""> <a class="prev" data-prev=""></a> <ul> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure> </p> </li> </ul> <a class="next" data-next=""></a> </p>
j 쿼리 캐러셀 anoSlide 페이지 매김
js
$('.carousel ul').anoSlide( { items: 1, speed: 500, prev: 'a.prev[data-prev-paging]', next: 'a.next[data-next-paging]', lazy: true, onConstruct: function(instance) { var paging = $('<p/>').addClass('paging fix').css( { position: 'absolute', top: 1, left:50 + '%', width: instance.slides.length * 40, marginLeft: -(instance.slides.length * 40)/2 }) /* Build paging */ for (i = 0, l = instance.slides.length; i < l; i++) { var a = $('<a/>').data('index', i).appendTo(paging).on( { click: function() { instance.stop().go($(this).data('index')); } }); if (i == instance.current) { a.addClass('current'); } } instance.element.parent().append(paging); }, onStart: function(ui) { var paging = $('.paging'); paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current'); } })
html<p class="carousel">
<a class="prev"></a>
<ul>
<li>Content goes here</li>
<li>Content goes here</li>
<li>Content goes here</li>
</ul>
<a class="next"></a>
</p>
ㅋㅋㅋ PHP 중국어 웹사이트! 추천 자료:
jQuery+PHP를 사용하여 테이블 편집 및 저장 방법 구현
jquery를 사용하여 테이블의 로컬 정렬을 구현하는 단계에 대한 자세한 설명(코드 포함)위 내용은 jQuery는 회전하는 슬라이드 캐러셀 효과를 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!