使用html+css+jquery实现3D轮播图

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。

以下是一个简单的3D轮播图实现的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 轮播图</title>
<style>
  .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 50px;
    perspective: 600px;
  }
  .carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }
  .carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 1s;
  }
</style>
</head>
<body>
 
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item" style="transform: translateZ(0)">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item" style="transform: rotateY(90deg) translateZ(0)">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="carousel-item" style="transform: rotateY(180deg) translateZ(0)">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="carousel-item" style="transform: rotateY(-90deg) translateZ(0)">
      <img src="image4.jpg" alt="Image 4">
    </div>
  </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function(){
    $('.carousel-inner').hover(function(){
      // 鼠标进入时暂停轮播
      clearInterval($(this).data('intervalId'));
    }, function(){
      // 鼠标离开时继续轮播
      autoPlay($(this));
    });
 
    autoPlay($('.carousel-inner'));
  });
 
  function autoPlay(carouselInner) {
    var current = $('.carousel-item:first-child');
    var next = current.next('.carousel-item').length ? current.next('.carousel-item') : $('.carousel-item:first-child');
    var speed = 2000; // 时间间隔（毫秒）
 
    setInterval(function(){
      carouselInner.css('transform', 'rotateY(' + (current.index() - next.index()) * 90 + 'deg) translateZ(0)');
      setTimeout(function(){
        carouselInner.css('transform', 'translateZ(0)');
        current = next;
        next = next.next('.carousel-item').length ? next.next('.carousel-item') : $('.carousel-item:first-child');
      }, speed);
    }, speed);
 
    carouselInner.data('intervalId', speed);
  }
</script>
 
</body>
</html>

在这个例子中，我们使用了HTML来定义结构，CSS来定义样式，jQuery来实现自动轮播的效果。这个简单的3D轮播图可以被扩展来包含更多的图片

使用html+css+jquery实现3D轮播图

评论已关闭

推荐阅读