淘先锋技术网

首页 1 2 3 4 5 6 7

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>

jquery旋转木马轮播特效

以上代码中,变量$carousel和$carouselList分别表示旋转木马的外层div和轮播图片列表ul,其中$carouselItem表示每个li标签,即每张轮播图片。通过计算轮播图片数量、宽度和旋转角度,使用transform进行旋转计算,实现轮播效果。