基于CSS/JS/jQuery实现自动连续3D轮播 支持鼠标悬浮暂停

问题根因 #

你碰到的缓动问题核心是两个：

1. CSS中transition属性默认使用ease缓动时序，会自动产生减速-加速的过渡效果
2. 自动轮播逻辑未完善，也没有和过渡时长对齐，也缺少鼠标悬停暂停的控制逻辑

修改方案 #

1. 调整CSS代码

找到.carousel和.item的transition配置，把时序改为linear，同时删掉item上没用的rotating动画声明：

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  /* 新增linear指定匀速过渡，时长和后面自动轮播间隔保持一致 */
  transition: transform 1s linear;
}
.item {
  display: block;
  position: absolute;
  width: 120px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
  /* 同样修改为匀速过渡，删掉没用的rotating动画 */
  transition: transform 1s linear;
}

2. 调整JS代码

新增自动播放控制、鼠标悬停启停逻辑，同时手动切换后重置自动播放定时器避免冲突：

var carousel = $(".carousel"),
    items = $(".item"),
    currdeg  = 0,
    autoTimer = null; // 存储自动轮播定时器

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

// 自动播放函数
function autoPlay() {
  // 先清之前的定时器避免重复
  clearInterval(autoTimer);
  autoTimer = setInterval(function() {
    $(".next").click();
  }, 1000); // 间隔和CSS过渡时长保持一致，都是1s
}

// 鼠标悬停暂停，离开继续
carousel.on("mouseenter", function() {
  clearInterval(autoTimer);
}).on("mouseleave", function() {
  autoPlay();
});

function rotate(e){
  // 手动切换时先重置定时器，避免刚点完就自动跳转
  clearInterval(autoTimer);
  if(e.data.d=="n"){
    currdeg = currdeg - 60;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 60;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
  items.css({
    "-webkit-transform": "rotateY("+(-currdeg)+"deg)",
    "-moz-transform": "rotateY("+(-currdeg)+"deg)",
    "-o-transform": "rotateY("+(-currdeg)+"deg)",
    "transform": "rotateY("+(-currdeg)+"deg)"
  });
  // 执行完旋转后重启自动播放
  autoPlay();
}

// 页面初始化启动自动播放
autoPlay();

修改完之后就能实现连续匀速转动，鼠标放到轮播元素上自动暂停，移开后恢复播放的效果，手动点击前后切换按钮也能正常工作。

内容的提问来源于stack exchange，提问作者Julien Canet