Question

我正在尝试创建一个简单的轮播而不使用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;
            }

我不知道错误在哪里。我是第一次尝试这个。任何帮助表示赞赏。如果我重复了之前提出的问题，我会道歉。

Answer 1

你遗失了很多东西！我不会在这里写一篇文章，因为有很多教程如this关于如何使用jQuery构建基本轮播。请通过其中的一些来了解基础知识。很高兴知道你正在尝试自己构建一个而不是从网上下载一个。

虽然很少：

当您使用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。看一看。

单击按钮时无法移动轮播中的列表项

1 个答案: