我想創建一個簡單的傳送帶,而不使用jquery和javascript中的任何插件。我的問題是,單擊適當的按鈕時,視口不顯示下一個或上一個列表項。我的代碼是:點擊按鈕時無法移動傳送帶中的列表項目
HTML
<html>
<body onload='createList()'>
<div id="carouse">
<button id='btn-prev' onclick='showPrev()'><img src="orange-towards-left.png"></button>
<div id="viewport">
<ul id="items">
</ul>
</div>
<button id='btn-next' onclick='showNext()'><img src="orange-towards-right.png"></button>
</div>
</body>
</html>
JS
function createList(){
var html="";
for(var i=0;i<6;i++){
html += "<li> Content " + (i+1) + "</li>";
}
document.getElementById('items').innerHTML = html;
}
function showNext(){
var $curr = $('#items li.current');
console.log('Current Index :: ', $curr.index());
$('#viewport ul').animate({right: '240px'},1000,function(){
$curr.find("li:last").after($curr.find("li:first"));
//$(this).css({marginLeft:0});
});
console.log('Current Index (after):: ', $curr.index());
}
function showPrev(){
var $curr = $('#items li.current');
$('#viewport ul').animate({right:'240px'},1000,function(){
$curr.find("li:last").before($(this).find("li:first"));
//$(this).css({marginLeft:0});
});
}
CSS
#carouse{
display: inline-flex;
/*visibility: hidden;*/
}
#viewport{
display:block;
width: 240px;
height: 125px;
position: relative;
overflow: hidden;
}
#items{
list-style: none;
position: absolute;
padding: 0;
margin: 0;
width: 240px;
left: 0;
top: 0;
overflow: hidden;
list-style-type: none;
float:left;
}
#items li{
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 121px;
border: 1px solid #dcdcdc;
width: 236px;
}
#btn-prev, #btn-next{
background: none;
border: 0px;
width: 30px;
height: 38px;
margin-top: 30px;
}
#btn-next img{
width: 8px;
height: 15px;
}
#btn-prev img{
width: 8px;
height: 15px;
}
我不知道在哪裏誤採取是。我正在嘗試第一次。任何幫助表示讚賞。如果我曾經重複過一個問題,我很抱歉。
請提供小提琴! –