如何创建圆形内容滑块？

Question

谁知道如何制作这样的滑块？可能有一些插件，Google搜索没有提示任何东西..

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

Answer 1

执行此类操作的一种方法是使用 transform:rotateZ，如此 fiddle

所示

已更新以自动执行很多步骤

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

<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>

通过应用以下 css。

它变成了一个看起来不错的表盘

#dial{
    width:500px;
    height:500px;
    border-radius:100%;
    border:1px solid black;
    position:relative;
}
.item{
    position:absolute;
    left:225px;
    top:10px;
    width:50px;
    height:50px;
    border:1px solid gray;
    border-radius:100%;
    text-align:center;
    transform-origin:25px 225px;
}
.icon{
    width:50px;
    height:50px;
    transform-origin:25px 25px;
}

重要的是定义项目的变换原点，因此它们围绕表盘的中心而不是它们自己的中心旋转。每个 individual item 和 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;}

直接跟踪活动索引可能同样容易或更容易，但这工作得很好

然后在我们的 rotateItems 循环中检查该项目是否有此索引，如果有，我们将其激活并更新内容

 if (i==activeI){
     $(this).addClass('activeItem');
     $dial.find('.content').text($(this).data('text')).css({backgroundColor:$(this).data('css')});

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

可以找到一种在包含内容的项目中使用隐藏 divs 的方法 here

所以项目是这样定义的

<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>

使用 css

不显示 .dial-content

.dial-content{
    display:none;
}

html 通过使用

从活动项目中复制

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

Answer 2

我喜欢 Pie Menu Generator (PMG). It's based on wheelnav.js，它使您能够通过从可用选项中进行选择来创建 SVG 旋转轮菜单，并在演示中查看结果。

此模块的主要缺点是它依赖于 raphael.js，当您只需要它用于菜单时，这有点矫枉过正。

更改 changeContent(item) 以显示您的内容。

工作演示：

var piemenu = new wheelnav('piemenu');
piemenu.sliceInitPathFunction = piemenu.slicePathFunction;
piemenu.initPercent = 0.1;
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.createWheel();

var contentArea = document.getElementById('piemenuContent');

changeContent(0);

function changeContent(item) {

    var index = typeof item === 'number' ? item : item.wheelItemIndex;

    switch(index) {
        case 0:
            contentArea.innerHTML = '<img src="http://s.hswstatic.com/gif/singapura-cat.jpg" class="pieContent">';
        break;

        case 1:
            contentArea.innerHTML = '<iframe src="https://en.wikipedia.org/wiki/Pie_menu" class="pieContent"></iframe>';
        break;

        case 2:
            contentArea.innerHTML = '<video class="pieContent" autoplay><source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">Your browser does not support HTML5 video.</video>';
        break;
    }
}

#piemenuWrapper { position: relative; width: 100vmax; height: 100vmax; }
#piemenuContent { position: absolute; top: 220px; right: 220px; bottom: 220px; left: 220px; overflow: hidden; }
.pieContent { width: 100%; height: 100%; }
#piemenu > svg { width: 100%; height: 100%; }
#piemenu { height: 100%; width: 100%; margin:auto; }
@media (max-width: 400px) { #piemenu { height: 300px; width: 300px; } }

[class|=wheelnav-piemenu-slice-basic] { fill: #497F4C; stroke: none; }
[class|=wheelnav-piemenu-slice-selected] { fill: #497F4C; stroke: none; }
[class|=wheelnav-piemenu-slice-hover] { fill: #497F4C;  stroke: none; fill-opacity: 0.77; cursor: pointer; }

[class|=wheelnav-piemenu-title-basic] { fill: #333; stroke: none; }
[class|=wheelnav-piemenu-title-selected] { fill: #fff; stroke: none; }
[class|=wheelnav-piemenu-title-hover] { fill: #222; stroke: none; cursor: pointer; }
[class|=wheelnav-piemenu-title] > tspan { font-family: Impact, Charcoal, sans-serif; font-size: 24px; }

<script src="http://wheelnavjs.softwaretailoring.net/js/raphael.min.js"></script>
<script src="http://wheelnavjs.softwaretailoring.net/js/raphael.icons.min.js"></script>
<script src="http://wheelnavjs.softwaretailoring.net/js/wheelnav.min.js"></script>
<div id='piemenuWrapper'>
<div id='piemenuContent'>
</div>
<div id='piemenu' data-wheelnav
 data-wheelnav-slicepath='DonutSlice'
 data-wheelnav-navangle='270'
 data-wheelnav-cssmode 
 data-wheelnav-init>
  <div data-wheelnav-navitemtext='0' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='1' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='2' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='3' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='4' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='5' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='6' onmouseup='changeContent(this);'></div>
  <div data-wheelnav-navitemtext='7' onmouseup='changeContent(this);'></div>
</div>
</div>

如何创建圆形内容滑块？

how to create round content slider?

javascript

css

jquery

slider