Javascript 如何创建圆形内容滑块？

谁知道如何创建这样的滑块？可能有一些插件，谷歌搜索没有任何建议

---

通过单击箭头或图标本身-滑块旋转，单击的图标显示在顶部，并相应地更改红色框中的内容。

这样做的一种方法是使用transform:rotateZ，如下图所示

更新以自动执行许多步骤

它的工作方式是定义一个“刻度盘”，并旋转刻度盘内部的“div.item”，使其在刻度盘周围均匀分布。然后它会旋转每个div内的图标，使它们看起来笔直

<div id='dial'>
    <div id='item1'class='item'>
        <div class='icon'>1</div>
    </div>
    <div id='item2' class='item'>
        <div class='icon'>2</div>
    </div>
    ... 
</div>

重要的是定义项目的变换原点，使其围绕刻度盘的中心而不是自身的中心旋转。每个单独项目和div的实际旋转由脚本执行。该脚本还自动附加处理程序，用于向左和向右旋转拨号盘，以及跳转到项目

function dial(el){
    var $dial = $(el);
    var $items = $dial.find('.item');
    var amount = $items.length;
    var degStep = 360/amount;
    var startAngle = 0;

    this.rotateItems = function(){
        $items.each(function(i){
            var d = i*degStep+startAngle;
            $(this).css({transform:'rotateZ('+d+'deg)'})
            .find('.icon').css({transform:'rotateZ('+(-d)+'deg)'});
        });
    };

    this.rotateLeft = function(){
        startAngle -= degStep;
        this.rotateItems();
    }

    this.rotateRight = function(){
        startAngle += degStep;
        this.rotateItems();
    }

    this.jumpTo = function(a){
        startAngle = a;
        this.rotateItems();
    }
    this.init = function(){
        var that = this;
        this.rotateItems();
        $dial.find('.left').click(function(){
            that.rotateLeft();
        });
        $dial.find('.right').click(function(){
            that.rotateRight();
        });
        $items.each(function(i){
            var d = i*degStep;
            $(this).click(function(){
                that.jumpTo(-d);
            });
        });
        return this;
    }

};

编辑了您对活动图标和图标相关内容的请求。当我们旋转轮子时，我们现在确定活动索引，如下所示：

 activeI = -startAngle/degStep%amount;
 if (activeI<0){activeI+=amount;}

有很多方法可以从活动项中获取内容，或者像我一样使用数据属性，或者使用复制的内容添加隐藏div，或者基于项索引执行ajax查询，或者使用javascript数组。。要做到这一点，很多方法都取决于您想要显示什么样的内容

可以找到在包含内容的项中使用隐藏div的方法

因此，项目的定义是这样的

<div data-css='red' class='item'>
    <div class='icon'>1</div>
    <div class='dial-content'>
        <h1>this is a header 1</h1>
        <p>and here is more content</p>
    </div>
</div>

通过使用从活动项复制html

 $dial.find('.content')
     .html($(this).find('.dial-content').html())
     .css({backgroundColor:$(this).data('css')});

我喜欢（PMG）。它基于，并使您能够通过从可用选项中选择并在演示中查看结果来创建SVG旋转轮菜单

这个模块的主要缺点是它依赖于，当您只需要它作为菜单时，这有点过分了

更改

更改内容（项目）

以显示您的内容

工作演示：

var piemunu=新车轮导航（“piemunu”）；
piemenu.sliceInitPathFunction=piemenu.slicePathFunction；
piemenu.initPercent=0.1；
piemenu.wheelRadius=piemenu.wheelRadius*0.83；
piemenu.createWheel（）；
var contentArea=document.getElementById（'piemenuContent'）；
变更内容（0）；
功能更改内容（项目）{
变量索引=项目类型=='编号'？项目：item.wheelItemIndex；
开关（索引）{
案例0：
contentArea.innerHTML=''；
打破
案例1：
contentArea.innerHTML=''；
打破
案例2：
contentArea.innerHTML='您的浏览器不支持HTML5视频'；
打破
}
}

#piemenuWrapper{位置：相对；宽度：100vmax；高度：100vmax；}
#piemenuContent{位置：绝对；顶部：220px；右侧：220px；底部：220px；左侧：220px；溢出：隐藏；}
.pieContent{宽度：100%；高度：100%；}
#piemenu>svg{宽度：100%；高度：100%；}
#图形菜单{高度：100%；宽度：100%；边距：自动；}
@媒体（最大宽度：400px）{图片菜单{高度：300px；宽度：300px；}
[class |=wheelnav Piemon slice basic]{填充：497F4C；笔划：无；}
[class |=已选择的车轮导航菜单片段]{填充：497F4C；笔划：无；}
[class |=wheelnav piemenu slice hover]{fill:#497F4C；笔划：无；填充不透明度：0.77；光标：指针；}
[类|=车轮导航菜单标题基本]{填充：#333；笔划：无；}
[class |=已选择的车轮导航菜单标题]{填充：fff；笔划：无；}
[class |=wheelnav Pie菜单标题悬停]{fill:#222；stroke:none；cursor:pointer；}
[class |=wheelnav Piemon title]>tspan{font-family:Impact，carbon，sans-serif；font-size:24px；}

请回顾有关堆栈溢出的问题，以及什么类型的问题和什么类型的问题，谢谢您的回答。但我可以将这些内容放在中心，并将其绑定到每个

.item

？我还需要为顶部的

.item

添加一些类，用于更改图标颜色和背景。@CroaToa使用依赖于项目的内容进行了更新您差点救了我，非常感谢。数据文本可能不适合我，因为我不仅要添加文本，还要添加html标记。最后，如果您提示如何添加html标记，我将接受您的回答。再次感谢您。@CroaToa您可以在数据文本中使用html标记，没有问题，只是您需要使用.html（$（this）.data（'text'））而不是.text（..），但如果需要，我将使用另一个选项更新小提琴needed@CroaToa添加了另一个fiddle（最后一行），它使用隐藏的div，其中包含内容，当项目变为活动状态时加载（注意，我只在12和8中添加了内容）谢谢您的回答。不幸的是，我需要这个内容滑块，而不是菜单。我需要根据顶部的图标更改中心的内容。

<div data-css='red' class='item'>
    <div class='icon'>1</div>
    <div class='dial-content'>
        <h1>this is a header 1</h1>
        <p>and here is more content</p>
    </div>
</div>

.dial-content{
    display:none;
}

 $dial.find('.content')
     .html($(this).find('.dial-content').html())
     .css({backgroundColor:$(this).data('css')});