我试图在不使用 jquery 和 javascript 中的任何插件的情况下创建一个简单的轮播。我的问题是视口(viewport)在单击相应按钮时不显示下一个或上一个列表项。我的代码是:
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;
}
不知道错在哪里。我是第一次尝试这个。任何帮助表示赞赏。如果我重复了之前提出的问题，我深表歉意。
最佳答案
你很多东西都不见了!我不打算在这里写一篇文章，因为有很多教程，例如 this关于如何使用 jQuery 构建基本轮播。请通过其中的一些来了解基础知识。很高兴知道您正在尝试自己构建一个，而不是仅仅从 Web 下载一个。
虽然有几件事:
- 当您使用 jQuery 时，请尽可能地使用它。
- 不要使用内联事件处理程序，例如
onclick="showNext()"等。 - 轮播元素的填充/边距(在您的情况下为
li)不是一个好主意，因为它们使设置尺寸有点棘手。将它们放在 HTML 中。
我只修改了您的代码，包括以上几点，以创建一个基本的轮播(没有像您所做的那样通过将第一个元素放在最后等方式进行克隆)。你真的应该把它变成jQuery plugin如果您想重用它们，请使用选项。这只是一个演示，您可以随意调整此代码以满足您的需要。
(function createCarousel() {
var $container = $('#items');
var current = 0;
var $html = $();
for(var i=0; i<6; i++) {
$html = $html.add($("<li/>", { html: "Content " + (i+1) }));
}
$container.empty().append($html);
var $items = $container.find("li");
var itemsCount = $items.length;
var itemWidth = $items.first().outerWidth();
$container.width(itemWidth * itemsCount);
$items.width(itemWidth);
$("#btn-prev").on("click", showPrev);
$("#btn-next").on("click", showNext);
function showNext() {
current = current >= itemsCount - 1 ? 0 : (current + 1);
$container.animate({
left: -(current * itemWidth)
}, 250);
}
function showPrev() {
current = current <= 0 ? itemsCount - 1 : (current - 1);
$container.animate({
left: -(current * itemWidth)
}, 250);
}
}());
我创建了一个 working demo完整的代码在 fiddle 中。看一看。
关于javascript - 单击按钮时无法移动轮播中的列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31381392/