Question

请参阅此处的简单演示：http://jsfiddle.net/1vf3dr80/

<body>
<div class="wrapper">
    <div class="users">

        <div class="user">
            First
        </div>

        <div class="user">
            Second
        </div>

        <div class="user">
            Third
        </div>

    </div>
</div>

.users {
margin-top: 1em;
margin: 0 auto;
position: fixed;
background-color: #fff;
top: 40px;
left: 0;
width: 100%;
height: 60px;
overflow: hidden;
border-bottom: 1px solid #ddd;
}

.user {
    display: inline-block;
    border-top: 1px solid #ddd;
    background-color: #777;
    width: 100%;
    vertical-align: middle;
    position: relative;
    height: 59px;
    transition: transform .5s ease-in;
    -web-kit-transition: transform .5s ease-in;
}




 $(document).ready(function(){

    var length = $('.user').length;
    var i = 0;
    var sliders = $('.user');
    setInterval(function(){
        sliders.each(function(){
            $(this).css('transform', 'translateY(' + (i)*-100 + '%)');

        });
        if(i == length - 1) {
            i = 0;
        }
        else {
            i++
        }

    }, 1000)


});

如图所示，滑块的初始方向是从上到下。当显示最后一张幻灯片，并且第一张幻灯片即将呈现时，移动将反转。

我想要的效果与这个效果基本相同：http://getbootstrap.com/javascript/#carousel

滑块四处移动，方向永不改变。

Answer 1

使用layerJS，

可能会更容易

编辑了您的jsfiddle示例。（请注意，我已经添加了两个外部资源）

只需添加一个舞台 div放置一个图层，然后在图像之间添加任意数量的框架。

HTML看起来像这样：

<div data-lj-type="stage">
<div data-lj-type="layer" data-lj-default-frame="image1">
    <div data-lj-type="frame" data-lj-name="image1" data-lj-neighbors.b="image2" class="frame">
        <image src="img/1.jpg" />
    </div>
    <div data-lj-type="frame" data-lj-name="image2" data-lj-neighbors.b="image3" class="frame">
        <image src="img/2.jpg" />
    </div>
</div>

*您也可以在它们之间进行不同类型的转换。

免责声明：我使用的是我在这里使用的layerJS开源库。

Answer 2

基本上，您要做的是使用jQuery移动元素。虽然我不会为您的整个轮播编写代码，但这是一个很好的方法来实现这个想法：

// This gets first list item and puts it after the last list item
// Add this code after each slide's transition
$('ul#carousel li:first').after($('ul#carousel li:last'));

（您需要更改此代码以使其符合您的轮播风格。）

通过不断地将第一个项目移动到最后（或反之亦然），它将产生无限效果。

Answer 3

你可以使用两个类使一个类成为活动的，另一个类作为前一个类，并根据它设置动画的顶部位置。

＆＃13;

$(document).ready(function(){
	
	var length = $('.user').length;
	var i = 0;
	var sliders = $('.user');
	setInterval(function(){
        
        $('.user').removeClass('prev');
        $('.user').removeClass('active');
        
		sliders.each(function(index, element){
            
            if(index == i - 1) { $(element).addClass('prev'); }
            else if(index == i) { $(element).addClass('active'); }
            else if(i == 0 && index == length-1) $(element).addClass('prev');
            					
		});
		if(i == length - 1) {
			i = 0;
		}
		else {
			i++
		}

	}, 1000)


});

＆＃13;

.users {
	margin-top: 1em;
	margin: 0 auto;
	position: fixed;
	background-color: #fff;
	top: 40px;
	left: 0;
	width: 100%;
	height: 60px;
	overflow: hidden;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.user {
	display: inline-block;
	border-top: 1px solid #ddd;
    background-color: #777;
    width: 100%;
	vertical-align: middle;
	position: absolute;
	height: 59px;
	transition: top .5s ease-in-out;
	-web-kit-transition: top .5s ease-in-out;
    z-index: 0;
    top: 60px;
}

.user.prev {
    top: -60px;
    z-index: 10;
}
.user.active {
    top: 0;
    z-index: 20;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div class="wrapper">
		<div class="users">

            <div class="user">
				First
			</div>

			<div class="user">
                Second
			</div>

			<div class="user">
				Third
			</div>

			<div class="user">
				Fourth
			</div>

			<div class="user">
				Fifth
			</div>

		</div>
	</div>

</body>

＆＃13;

如何使圆形转盘滑块只用一个方向改变？

3 个答案: