项目超过 div 宽度时的水平滚动/轮播

Question

我有一个固定大小的<div>，其中包含块。通过单击+，用户可以添加额外的框（理论上是无限的）。

当“框”的数量超过<div> 容器的宽度时，我希望用户能够向左和/或向右滚动以查看所有框。

目前我正在寻找一个开始的地方，因为我以前没有实现过这样的功能。

那里有 JQuery 示例，但我想尽可能避免使用 JQuery。

请帮忙。

Answer 1

根据我的评论并建议您使用 KendoUI ScrollView 并看到您错过了选项itemsPerPage，我将稍微修改 KendoUI 演示以向您展示如何使用它。

当您想在每页显示多个项目时，您只需在小部件的初始化中定义所需的数量。示例：

  $("#scrollview").kendoMobileScrollView({
      dataSource:    dataSource,
      contentHeight: 150,
      itemsPerPage:  4,
      enablePager:   false,
      template:      kendo.template($("#template").html())
  });

您还可以定义一个模板，在其中定义如何呈现每个页面。示例：

<script id="template" type="text/x-kendo-template">
    <table>
        <tr>
            # for (var i = 0; i < data.length; i++) { #
            <td>
                <img src="#: data[i].image_url #"/>
            </td>
            # } #
        </tr>
    </table>
</script>

当你把所有东西放在一起时，你有：http://jsfiddle.net/OnaBai/5M9Vw/

Answer 2

我找到了一个相当简单的算法来处理左/右滚动。

通过一些工作，我应该能够在没有 JQuery 的情况下完成这项工作。

JFiddle 示例是 here。

HTML

<div class="mtabArrowLeft">&laquo;</div>
<div class="menuTabs">
        <div class="img-reel">
            <input class="menutabBTN" name="" type="button" value="a" />
            <input class="menutabBTN" name="" type="button" value="b" />
            <input class="menutabBTN" name="" type="button" value="c" />
            <input class="menutabBTN" name="" type="button" value="d" />
            <input class="menutabBTN" name="" type="button" value="e" />
            <input class="menutabBTN" name="" type="button" value="f"/>
        </div>
</div>
<div class="mtabArrowRight">&raquo;</div>

JavaScript

$(function() {
            var imageWidth = 71;
            var reelSize = 4;
            var imageSum = $('.img-reel input').size();
            var imageReelWidth = imageWidth * imageSum;
            $('.img-reel').css({'width' : imageReelWidth});

            rotate = function(){
                var trigger = $btn.attr('class');
                var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth;
                var reel_currentPosition = $('.img-reel').css('left').replace('px','');
                var pos = reel_currentPosition-image_reelPosition;
                var maxPos = (imageSum-reelSize)*-imageWidth;
                //console.log('pos='+pos+', max='+maxPos);
                if(pos>=maxPos && pos<=0){
                    $('.img-reel').animate({left:pos},300);
                    $('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1);
                    //console.log('move');
                    if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.2);}
                    else if(pos==0){$('.mtabArrowLeft').fadeTo(250,0.2);}
                }
            };
            if (imageSum > 4) {
                $('.mtabArrowLeft,.mtabArrowRight').click(function(){
                    $btn = $(this);
                    rotate();
                    return false;
                });
            }
            else {
                $('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.2).click(function(){return false});
            }
    })

CSS

html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { margin:20px; font:normal 62.5% tahoma }
p { margin:20px; }

.menuTabs {
    float: left;
    width: 284px;
    overflow:hidden;
    position:relative;
    height:50px;
}

.img-reel { position:absolute; left:0; top:0; height:50px; }

.mtabArrowLeft {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 4px;
     cursor:pointer;
  font-size:20px;
}

.mtabArrowRight {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 15px;
  cursor:pointer;
  font-size:20px;
}

      .mtabArrowLeft, .mtabArrowRight { color:#fff; font-weight:bold; background:red; text-indent:12px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; line-height:21px }

.menutabBTN {
    float: left;
    height: 25px;
    width: 65px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
}