我想使用两个按钮
滚动div内容HTML编码如下:
<div class="bstimeslider">
<a href="#"> <img src="images/left.png" ></a>
<div class="tslshow">
<div class="bktibx"> 12:00 </div>
<div class="bktibx"> 12:30 </div>
<div class="bktibx"> 13:00 </div>
<div class="bktibx"> 13:30 </div>
<div class="bktibx"> 14:00 </div>
<div class="bktibx"> 14:30 </div>
<div class="bktibx"> 15:00 </div>
<div class="bktibx"> 15:30 </div>
<div class="bktibx"> 16:00 </div>
<div class="bktibx"> 16:30 </div>
<div class="bktibx"> 17:00 </div>
<div class="bktibx"> 17:30 </div>
</div>
<a href="#"><img src="images/right.png"></a>
现在只有15:00显示当我滚动右键时它应该从15:30到17:30显示..
同样,当我点击向左箭头时,它应向左滚动..
使用Jquery我想执行此操作。任何开源插件都可用。
答案 0 :(得分:9)
这只是一个简单的例子,但你可以看到重点 - 如何做到这一点。
HTML:
<div class="bstimeslider">
<div id="rightArrow"></div>
<div id="viewContainer">
<div id="tslshow">
<div class="bktibx"> 12:00 </div>
<div class="bktibx"> 12:30 </div>
<div class="bktibx"> 13:00 </div>
<div class="bktibx"> 13:30 </div>
<div class="bktibx"> 14:00 </div>
<div class="bktibx"> 14:30 </div>
<div class="bktibx"> 15:00 </div>
<div class="bktibx"> 15:30 </div>
<div class="bktibx"> 16:00 </div>
<div class="bktibx"> 16:30 </div>
<div class="bktibx"> 17:00 </div>
<div class="bktibx"> 17:30 </div>
</div>
</div>
<div id="leftArrow"></div>
</div>
CSS:
.bstimeslider {
width:500px;
height:40px;
background:#ccc;
position:relative;
}
.bktibx {
float:left;
margin:0 40px 0 0 ;
font-size:18px;
width:60px;
display:block;
background:#000;
color:#fff;
}
#tslshow {
position:absolute;
left:0;
width:1200px;
}
#leftArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
left:0px;
}
#rightArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
right:0px;
}
#viewContainer {
width:360px;
height:100%;
background:#00ff00;
position:absolute;
left:50%;
margin-left:-180px;
overflow:hidden;
}
JavaScript的:
var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750;
$("#rightArrow").click(function(){
var currentPosition = parseInt(view.css("left"));
if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})
});
$("#leftArrow").click(function(){
var currentPosition = parseInt(view.css("left"));
if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});
});
答案 1 :(得分:0)
您可以使用常规的旧CSS更改滚动条的样式:
Obj1 : {
id : int,
name : string,
Obj2 : {
id : int,
name : string
obj1list : //ignored avoids recursion
}
}
Obj2 : {
id : int,
name : string,
obj1list : [{
id : int,
name : string,
obj2 : //ignored avoids recursion
},
{
id : int,
name : string
obj2 : //ignored avoids recursion
}
]
}