jquery旋转木马轮播特效是一种常见的网页轮播特效,可以让网页内容更加生动鲜明,提升用户体验。以下是一个简单的jquery旋转木马轮播特效实例:
<div class="carousel"> <ul class="carousel-list"> <li class="carousel-item"><img src="img1.jpg"></li> <li class="carousel-item"><img src="img2.jpg"></li> <li class="carousel-item"><img src="img3.jpg"></li> <li class="carousel-item"><img src="img4.jpg"></li> <li class="carousel-item"><img src="img5.jpg"></li> </ul> </div> <script> $(document).ready(function(){ var $carousel = $('.carousel'), $carouselList = $('.carousel-list'), $carouselItem = $('.carousel-item'), carouselLength = $carouselItem.length, carouselWidth = $carouselItem.outerWidth(), rotateAngle = 360 / carouselLength, currentAngle = 0; $carouselList.css('width', carouselWidth * carouselLength); $carouselItem.each(function(index) { var angle = rotateAngle * index; $(this).css({ '-webkit-transform': 'rotateY(' + angle + 'deg) translateZ(' + (carouselWidth / 2) + 'px)', '-moz-transform': 'rotateY(' + angle + 'deg) translateZ(' + (carouselWidth / 2) + 'px)', 'transform': 'rotateY(' + angle + 'deg) translateZ(' + (carouselWidth / 2) + 'px)' }); }); function rotateCarousel() { currentAngle = (currentAngle - rotateAngle) % 360; $carouselList.css({ '-webkit-transform': 'translateZ(-' + (carouselWidth / 2) + 'px) rotateY(' + currentAngle + 'deg)', '-moz-transform': 'translateZ(-' + (carouselWidth / 2) + 'px) rotateY(' + currentAngle + 'deg)', 'transform': 'translateZ(-' + (carouselWidth / 2) + 'px) rotateY(' + currentAngle + 'deg)' }); requestAnimationFrame(rotateCarousel); } rotateCarousel(); }); </script>
以上代码中,变量$carousel和$carouselList分别表示旋转木马的外层div和轮播图片列表ul,其中$carouselItem表示每个li标签,即每张轮播图片。通过计算轮播图片数量、宽度和旋转角度,使用transform进行旋转计算,实现轮播效果。