我有这个垂直的幻灯片可以通过向上/向下箭头导航.幻灯片容器div内有7个项目(div),但一次只能看到3个项目.实际上,这个幻灯片是一个菜单 – 从3个可见的项目中,中间是一个可点击的,它将在页面的其他地方的div中加载内容.
现在,由于有3个项目,只有第二个项目(中间)可以点击,我需要创建它们之间的区别.所以,我想像这样改变项目border / border-radius：
问题是,我不知道如何做,因为div在不断变化的地方在可见的区域.
我真的需要帮助.
HTML标记：
<div id="rocksType_btns">
<div id="rocksType_btnUp"></div>
<div id="rocksType_btnDown"></div>
</div>
<div id="rocksType_subtypeSlider">
<div id="rocksType_DBitems_container">
<div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
<div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
<div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
<div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
<div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
<div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
<div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
</div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->
我已经为之前/当前/之后的状态定义了CSS代码 – 只需要分配它们.
这是一个Fiddle.
感谢名单.
佩德罗
解决方法
尝试像这样的东西…
HTML：
<div id="viewport">
<ul id="list">
<li class="above">Foo</li>
<li class="selected">Bar</li>
<li class="below">Barf</li>
<li>Boo</li>
<li>Huh</li>
<li>Wha</li>
<li>Oh</li>
</ul>
</div>
<a href="#" id="up">UP</a> -- <a href="#" id="down">DOWN</a>
CSS：
#viewport{
height: 175px;
overflow: hidden;
padding: 0;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
border: 1px solid #ccc;
width: 70px;
height: 50px;
line-height: 50px;
padding: 0 0 0 30px;
margin: 5px;
font-size: 1.5em;
color: #999;
background-color: #fed;
}
li.selected{
border-radius: 20px;
background-color: #fe0
}
li.above{
border-radius: 10px;
border-top-left-radius: 35px;
}
li.below{
border-radius: 10px;
border-bottom-left-radius: 35px;
}
JS：
var viewport = $('#viewport'),list = $('#list'),itemHeight = $('li',list).first().outerHeight(),btnUp = $('#up'),btnDown = $('#down'),busy = false,selected,above,below;
var update = function(){
selected = $('li:nth-of-type(2)',list).addClass('selected',200);
above = selected.prev().addClass('above',200);
below = selected.next().addClass('below',200);
setTimeout(function(){ busy = false; },200);
};
var goUp = function(){
if(busy) return; else busy = true;
$('li',list).removeClass('selected above below');
list.animate({marginTop: -itemHeight},600,'eaSEOutBounce',function(){
list.css({marginTop: 0}).append($('li',list).first());
update();
});
}
var godown = function(){
if(busy) return; else busy = true;
$('li',list).removeClass('selected above below');
list
.css({marginTop: -itemHeight})
.prepend($('li',list).last())
.animate({marginTop: 0},update);
}
btnUp.on('click',goUp);
btnDown.on('click',godown);
Fiddle here. Slightly fancier version.
我认为唯一的办法是跟踪什么,而不是围绕动画构建.