如何创建圆形内容滑块？

Question

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

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

Answer 1

做这样的事情的一种方法是使用transform:rotateZ,如这个小提琴所示

更新以自动执行许多步骤

它的工作方式是定义一个"表盘",并在表盘内旋转'div.item',使它们在表盘周围均匀分布.然后在每个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;
}

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

有很多方法可以从活动项中获取内容,要么使用数据属性,要么像我一样,或者添加隐藏的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>

.dial-content未使用css显示

.dial-content{
    display:none;
}

html通过使用来从活动项目中复制

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