如何为jQuery CSS3 3D透视轮播添加锚点旋转功能？

我知道你现在在用这款jQuery 3D轮播插件，默认只有按钮点击和轮播项点击的切换方式，想要新增锚点控制的功能对吧？没问题，咱们一步步来修改就能实现。

第一步：添加锚点链接到页面 #

首先在HTML里加入对应轮播项的锚点链接，链接的href值要和轮播项figure的id对应上，比如：

<div style="text-align:center; margin:20px 0;">
  <a href="#01" class="carousel-anchor">跳转到轮播项1</a>
  <a href="#02" class="carousel-anchor">跳转到轮播项2</a>
</div>

第二步：修改JS插件代码，加入锚点处理逻辑 #

接下来咱们要给插件新增锚点点击的监听逻辑，同时处理页面加载时的URL锚点（比如直接打开带锚点的链接时自动切换轮播）。修改后的完整JS代码如下，我把新增部分做了逻辑标注：

/* * Flux 3D Carousel * Author: Dean Coulter * Licensed under the MIT license * * Version 0.1 */ 
(function($) { 
  $.fn.carousel3d = function(args) { 
    var el = ({ carousel_frame: $(this) }); 
    var size = el.carousel_frame.children().size(); 
    var panelSize = el.carousel_frame.width(); 
    var translateZ = Math.round((panelSize / 2) / Math.tan(Math.PI / size)); 
    el.carousel_frame.css({ 
      "transform": "rotateY(0deg) translateZ(-" + translateZ + "px)" 
    }) 
    var rotateY = 0; 
    var rotate_int = 0; 
    var ry = 360 / size; 
    var box = 0; 

    function animate_slider() { 
      rotateY = ry * rotate_int; 
      $("#test").text(rotateY + ", " + rotate_int + ", "); 
      for (i = 0; i < size; i++) { 
        var z = (rotate_int * ry) + (i * ry); 
        el.carousel_frame.children("figure:eq(" + i + ")").css({ 
          "transform": "rotateY(" + z + "deg ) translateZ(" + translateZ + "px)" 
        }); 
      } 
      rotateY = 0; 
      box = 0; // reset rotateY, ready for re-use 
    } 

    // 新增：通用锚点处理函数，根据轮播项ID切换位置
    function handleAnchorClick(targetId) {
      var targetItem = el.carousel_frame.children("figure#" + targetId);
      if(targetItem.length > 0){
        var new_int = -1 * targetItem.index();
        // 保持原有的旋转逻辑，避免切换时出现反向大旋转
        if (new_int < rotate_int + (-1 * (size / 2))) {
          rotate_int = size + new_int;
        } else {
          rotate_int = new_int;
        }
        animate_slider();
      }
    }

    animate_slider(); 

    $(".next").on("click", function() { 
      rotate_int -= 1; 
      animate_slider(); 
    }); 

    $(".prev").on("click", function() { 
      rotate_int += 1; 
      animate_slider(); 
    }); 

    el.carousel_frame.children().on("click", function() { 
      new_int = -1 * $(this).index(); 
      if (new_int < rotate_int + (-1 * (size / 2))) { 
        rotate_int = size + new_int; 
      } else { 
        rotate_int = new_int; 
      } 
      animate_slider(); 
    }); 

    // 新增：监听锚点链接点击，阻止默认跳转并触发轮播切换
    $(".carousel-anchor").on("click", function(e){
      e.preventDefault();
      var targetId = $(this).attr("href").replace("#", "");
      handleAnchorClick(targetId);
    });

    // 新增：页面加载时检查URL锚点，自动切换到对应轮播项
    $(document).ready(function(){
      var hash = window.location.hash;
      if(hash){
        var targetId = hash.replace("#", "");
        handleAnchorClick(targetId);
      }
    });

  } 
})(jQuery);

第三步：完整HTML示例 #

把锚点链接整合到你的页面中，完整HTML代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class=" lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class=" lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class=" lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jQuery 3D Carousel Demo</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  <![endif]-->
  <script type="text/javascript">
    $(document).ready(function() {
      $('#carousel').carousel3d();
    });
  </script>
</head>
<body>
  <h2 align="center" style="margin-bottom:25px;margin-top:15px;">jQuery 3D Carousel Demo</h2>
  
  <!-- 锚点控制区 -->
  <div style="text-align:center;margin-bottom:20px;">
    <a href="#01" class="carousel-anchor">跳转到轮播项1</a>
    <a href="#02" class="carousel-anchor">跳转到轮播项2</a>
  </div>

  <div id="container">
    <div id="perspective">
      <div id="carousel">
        <figure id="01" name="01">1</figure>
        <figure id="02" name="02">2</figure>
        <!-- 可继续添加更多轮播项，记得给每个figure设置唯一ID -->
      </div>
    </div>
  </div>
</body>
</html>

逻辑说明 #

• 新增的handleAnchorClick函数复用了插件原有的旋转逻辑，确保切换动画和默认行为一致，不会出现突兀的反向旋转。
• 监听锚点链接点击时阻止了默认页面跳转，避免页面滚动到锚点位置。
• 页面加载时自动检测URL中的锚点，实现直接访问带锚点的链接时自动切换到对应轮播项的效果。

内容的提问来源于stack exchange，提问作者Tim Kruger