我想创建一个简单的内容滑块,将元素移动到不同的层,看看小提琴:
http://jsfiddle.net/ujmdjL00/3/
$(document).ready(function() {
var offset = 0;
var opacity = 1;
var zindex = $("#slider li").length;
var nextBtn = $("#next");
var prevBtn = $("#prev");
$("#slider li").each(function() {
$(this).css({
top: -offset,
bottom: offset,
left: offset,
right: offset,
opacity: opacity,
zIndex: zindex
});
offset = offset + 10;
opacity = opacity - 0.2;
zindex = zindex - 1;
});
nextBtn.click(function() {
});
prevBtn.click(function() {
});
});
#slider {
width: 400px;
margin: 100px auto 0 auto;
position: relative;
padding: 0;
list-style: none;
}
#slider li {
background: #000;
height: 300px;
line-height: 300px;
color: #fff;
position: absolute;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prev">prev</button>
<button id="next">next</button>
<ul id="slider">
<li>Slide #1</li>
<li>Slide #2</li>
<li>Slide #3</li>
<li>Slide #4</li>
</ul>
如果单击“下一步”按钮,则第一张幻灯片应向上缩小并淡出,然后显示第二张幻灯片(每张幻灯片必须移动,第一张贴在末尾)。
我的问题:
如何创建这样的循环? 什么是最好的方法 - 克隆第一张幻灯片还是移动?
我应该使用transform: scale();
还是操纵宽度/高度?
我也不确定如何实现动画 - 任何有用的提示/链接?
谢谢!
答案 0 :(得分:1)
我让它像圆形的转盘一样工作。如果不是你想要的那样,我希望这会给你一个好的方向。
http://jsfiddle.net/ujmdjL00/12/
$(document).ready(function() {
var offset = 0
, index=0
, totalCount = $("#slider li").length
;
var opacity = 1;
var zindex = $("#slider li").length;
var nextBtn = $("#next");
var prevBtn = $("#prev");
$("#slider li").each(function() {
$(this).css({
top: -offset,
bottom: offset,
left: offset,
right: offset,
opacity: opacity,
zIndex: zindex
});
$(this).attr("data-num", zindex - 1);
offset = offset + 10;
opacity = opacity - 0.2;
zindex = zindex - 1;
});
nextBtn.click(function() {
var activeItem = $("#slider li.active")
, index = parseInt(activeItem.attr("data-num"));
UpdateSliderTiles(activeItem, index, true);
});
prevBtn.click(function() {
var activeItem = $("#slider li.active")
, index = parseInt(activeItem.attr("data-num"));
UpdateSliderTiles(activeItem, index, false);
});
function UpdateSliderTiles(item, index, goingForward){
var nextActiveItemIndex=0, dataNum = 0;
if(goingForward){
offset = 30;
opacity = 0.4;
zindex = 1;
dataNum = 0;
nextActiveItemIndex = 2;
}
else{
offset = 0;
opacity = 1;
zindex = 4;
dataNum = 3;
nextActiveItemIndex = 0;
}
var NOffset = null
, NOpacity = null
, NZIndex = null
, NDataNum = null
;
$("#slider li").removeClass("active");
$("#slider li").each(function() {
var num = parseInt($(this).attr("data-num"));
if(nextActiveItemIndex == num){
$(this).addClass("active");
}
if((goingForward && num==index) || (!goingForward && num==nextActiveItemIndex)){
$(this).css({
top: -offset,
bottom: offset,
left: offset,
right: offset,
opacity: opacity,
zIndex: zindex
});
$(this).attr("data-num", dataNum);
}
else{
if(goingForward){
num = num+1;
NOffset = parseInt($(this).css("bottom"))-10;
NOpacity = parseFloat($(this).css("opacity"))+0.2;
NZIndex = parseInt($(this).css("zIndex"))+1;
}
else{
num = num-1;
NOffset = parseInt($(this).css("bottom"))+10;
NOpacity = parseFloat($(this).css("opacity"))-0.2;
NZIndex = parseInt($(this).css("zIndex"))-1;
}
$(this).css({
top: -NOffset,
bottom: NOffset,
left: NOffset,
right: NOffset,
opacity: NOpacity,
zIndex: NZIndex
});
$(this).attr("data-num", num);
}
});
}
});