文章/答案/技术大牛

发布

问Jquery ScrollBox不工作
EN

Stack Overflow用户

提问于 2015-07-07 20:26:44

回答 2查看 756关注 0票数 0

我正在尝试设置Jquery Scrollbox http://wmh.github.io/jquery-scrollbox/，它没有初始化。我已经设置了我在https://jsfiddle.net/SamuelMuiruri/DTcHh/9587/上使用的一堆代码

这是我的css：

.scroll-img {
  height: 142px;
  overflow: hidden;
  font-size: 0;
}

.scroll-img ul li {
  display: inline-block;
  margin: 10px 0 10px 10px;
}

这个问题可能是javascript的问题，它没有初始化。

javascript

jquery

回答 2

Stack Overflow用户

发布于 2015-07-07 20:36:24

试试这个..。

<html>
<head>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Amaranth:400,700" rel="stylesheet" type="text/css">
<link href="http://wmh.github.io/jquery-scrollbox/demo.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://wmh.github.io/jquery-scrollbox/jquery.scrollbox.js"></script>
</head>
<body>
<div class="container">
  <div class="masthead">
    <h1 class="muted">jQuery Scrollbox</h1>
  </div>
  <div class="body-content">


    <div id="demo3" class="scroll-img">
      <ul>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=234" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_234.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=485" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_485.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=511" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_511.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=725" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_725.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=840" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_840.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=934" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_934.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1295" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1295.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1459" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1459.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1590" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1590.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1688" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1688.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=3206" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_3206.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=3810" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_3810.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=5176" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_5176.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=6861" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_6861.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=7004" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_7004.png"></a></li>
      </ul>
    </div>


    <div id="demo4" class="scroll-img">
      <ul>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=234" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_234.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=485" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_485.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=511" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_511.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=725" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_725.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=840" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_840.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=934" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_934.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1295" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1295.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1459" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1459.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1590" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1590.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1688" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1688.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=3206" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_3206.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=3810" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_3810.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=5176" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_5176.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=6861" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_6861.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=7004" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_7004.png"></a></li>
      </ul>
    </div>


    <div id="demo5" class="scroll-img">
      <ul>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=234" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_234.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=485" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_485.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=511" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_511.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=725" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_725.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=840" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_840.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=934" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_934.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1295" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1295.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1459" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1459.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1590" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1590.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=1688" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_1688.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=3206" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_3206.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=3810" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_3810.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=5176" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_5176.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=6861" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_6861.png"></a></li>
        <li><a href="http://www.faceyourmanga.com/mangatar.php?id=7004" target="_blank"><img src="http://wmh.github.io/jquery-scrollbox/img/normal_7004.png"></a></li>
      </ul>
    </div>
    <div id="demo5-btn" class="text-center">
      <button class="btn" id="demo5-backward"><i class="icon-chevron-left"></i> Backward</button>
      <button class="btn" id="demo5-forward">Forward <i class="icon-chevron-right"></i></button>
    </div>



  </div>
</div>
<a href="https://github.com/wmh/jquery-scrollbox"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script>
$(function () {

  $('#demo3').scrollbox({
    switchItems: 5,
    distance: 144
  });
  $('#demo4').scrollbox({
    direction: 'h',
    switchItems: 5,
    distance: 670
  });
  $('#demo5').scrollbox({
    direction: 'h',
    distance: 134
  });
  $('#demo5-backward').click(function () {
    $('#demo5').trigger('backward');
  });
  $('#demo5-forward').click(function () {
    $('#demo5').trigger('forward');
  });

});
</script>
</body>
</html>

演示：http://jsfiddle.net/6df43p4e/

票数 0

Stack Overflow用户

发布于 2015-07-07 20:43:10

您包含这些文件的顺序可能会有问题。

它是你应该首先包含的jQuery文件，而且只有在这之后你才应该包含scrollbox。

尝试一下，如果没有，请告诉我们详细信息

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31268524

复制

相似问题

问Jquery ScrollBox不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery ScrollBox不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery ScrollBox不工作
EN