CSS3堆成圆环形状的卡片滑块

Circle Slider，可用来做环状幻灯片。

h5, slider

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4542
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

// helpful variables
    var slider = $('.slider');
    var sliderInner = slider.find('.slider-inner');
    var sliderOrigin = slider.find('.slider-origin');
    var sliderItems = slider.find('.slider-item');
    var itemsLength = sliderItems.length;
    var calcDeg = 270 / itemsLength;
    var clickDown = false;
    var mouseMove = false;
    var moveFrom = null;
    var moveTo = null;
    var extraDeg = 0;
    var currentItem = sliderItems.eq(0);

// slider origin width & height = half of item height
    sliderOrigin.width(sliderItems.outerHeight() / 2);
    sliderOrigin.height(sliderItems.outerHeight() / 2);

// slider inner width & height = item height * 3.5
    sliderInner.width(sliderItems.outerHeight() * 3.5);
    sliderInner.height(sliderItems.outerHeight() * 3.5);

var sliderInnerWidth = sliderInner.outerWidth();
    var sliderInnerOffset = sliderInner.offset();

sliderOrigin.css('margin-top', (sliderInner.height() / 2) - (sliderOrigin.height() / 2));

// calc rotation positioning
    function rotationPosition(exceptIndex) {
        exceptIndex = exceptIndex | 0;
        var i = 1;
        sliderItems.each(function(e) {
            var $this = $(this);
            extraDeg = exceptIndex > itemsLength / 2 ? 360 : 0;
            if (e === exceptIndex) {
                $this.addClass('active').css('transform', 'rotate(' + extraDeg + 'deg)');
            } else {
                $this.css('transform', 'rotate(' + ((i * calcDeg) + 45) + 'deg)');
                i++;
            }
        });
    }
    rotationPosition();

// click event on item
    var clickedItemIndex = null;

function sliderItemsClickEvent() {

sliderItems.mousedown(function(e) {
            if (clickedItemIndex == null && e.which == 1) {
                clickedItemIndex = $(this).index();
            }
        });
        sliderItems.mouseup(function() {
            var $this = $(this);
            if (clickedItemIndex === $this.index()) {
                currentItem = $this;
                pushIndex($this.index());
            }
        });
    }
    sliderItemsClickEvent();

// push index of the activated item
    function pushIndex(index) {
        sliderItems.removeClass('active');
        rotationPosition(index);
    }

// clickDown = true if mousedown on slider
    sliderInner.mousedown(function(e) {
        clickDown = true;
        moveFrom = e.pageX;
    });

// clickDown = false if mouseup on any place in the page
    $(document).mouseup(function(e) {
        clickDown = false;
        setTimeout(function() {
            clickedItemIndex = null;
        }, 505);
        // setTimeout(function(){clickDown = false;}, 505);
        if (mouseMove) {
            mouseMove = false;
            moveto = e.pageX;
            swipe(moveFrom, moveto);
        }
    });

// calc mouse move on sliderInner div
    sliderInner.mousemove(function(e) {
        if (clickDown) {
            if (!mouseMove) {
                mouseMove = true;
            }
            var offsetX = e.pageX - sliderInnerOffset.left;
            var move = moveFrom - sliderInnerOffset.left;
            var motionDeg = ((offsetX - move) / sliderInnerWidth) * (calcDeg * 2);
            extraDeg = currentItem.index() > itemsLength / 2 ? 360 : 0;
            sliderInner.find('.slider-item.active').css('transform', 'rotate(' + (motionDeg + extraDeg) + 'deg)');
        }
    });

function swipe(from, to) {
        var distance = Math.abs(from - to); // mouse move distance
        var rightDir = from < to;
        if (distance > sliderInnerWidth / 4) {
            navigate();
        } else {
            currentItem.css('transform', 'rotate(' + (currentItem.index() > itemsLength / 2 ? 360 : 0) + 'deg)');
        }

}
});

编译

CSS

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
.title {
    font-weight: 700;
    font-size: 55px;
    margin-bottom: 10px;
    color: #333;
}
.description {
    font-size: 21px;
    font-weight: 400;
    color: #888;
}
.bold {
    font-weight: 700;
}
.slider {
    padding: 50px 0;
}
.slider-origin {
    background-color: #bd2cbd;
    border-radius: 50%;
    /*margin-top: 20%;*/
    
    display: inline-block;
    position: relative;
}
.slider-inner {
    display: inline-block;
}
.slider-item {
    width: 74px;
    height: 100px;
    background-color: rgba(128, 0, 128, 0.4);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    position: absolute;
    bottom: 200%;
    left: 50%;
    margin-left: -37px;
    cursor: pointer;
    transform-origin: center 175%;
    -webkit-transform-origin: center 175%;
    -ms-transform-origin: center 175%;
    -moz-transform-origin: center 175%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -webkit-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    text-align: left;
    color: #fff;
    padding: 7px;
    box-sizing: border-box;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
    
    -ms-user-select: none;
    user-select: none;
}
.slider-item.active {
    background-color: purple;
    cursor: default;
}
.slider-item:not(.active):hover {
    background-color: #540554;
}

HTML

<div class="guid">
    <h1 class="title">Circle Slider</h1>
    <p class="description">
        <span class="bold">Drag</span> or <span class="bold">Select</span> an item
    </p>
</div>
<div class="slider">
    <div class="slider-inner">
        <div class="slider-origin">
            <div class="slider-item">1</div>
            <div class="slider-item">2</div>
            <div class="slider-item">3</div>
            <div class="slider-item">4</div>
            <div class="slider-item">5</div>
            <div class="slider-item">6</div>
            <div class="slider-item">7</div>
            <div class="slider-item">8</div>
            <div class="slider-item">9</div>
            <div class="slider-item">10</div>
            <div class="slider-item">11</div>
            <div class="slider-item">12</div>
            <div class="slider-item">13</div>
            <div class="slider-item">14</div>
            <div class="slider-item">15</div>
            <div class="slider-item">16</div>
            <div class="slider-item">17</div>
            <div class="slider-item">18</div>
            <div class="slider-item">19</div>
            <div class="slider-item">20</div>
            <div class="slider-item">21</div>
            <div class="slider-item">22</div>
            <div class="slider-item">23</div>
            <div class="slider-item">24</div>
            <div class="slider-item">25</div>
            <div class="slider-item">26</div>
            <div class="slider-item">27</div>
            <div class="slider-item">28</div>
            <div class="slider-item">29</div>
            <div class="slider-item">30</div>
        </div>
    </div>
</div>

Circle Slider，可用来做环状幻灯片。

h5, slider

编辑器支持Emmet

快捷键

Circle Slider，可用来做环状幻灯片。

h5, slider

使用SVG制作手表形状的滑块控件

使用React实现的圆环形滑块控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：