Javascript Jquery滚动框不工作
我正在尝试设置Jquery Scrollbox，但它没有初始化。我已经设置了一些我正在使用的代码 以下是我的css：Javascript Jquery滚动框不工作,javascript,jquery,Javascript,Jquery,我正在尝试设置Jquery Scrollbox，但它没有初始化。我已经设置了一些我正在使用的代码 以下是我的css： .scroll-img { height: 142px; overflow: hidden; font-size: 0; } .scroll-img ul li { display: inline-block; margin: 10px 0 10px 10px; } 问题可能出在javascript上，它没有初始化。试试这个 <html> &l
.scroll-img {
height: 142px;
overflow: hidden;
font-size: 0;
}
.scroll-img ul li {
display: inline-block;
margin: 10px 0 10px 10px;
}
<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>
jQuery滚动框
向后的
向前地
$（函数（）{
$（'#demo3'）。滚动框({
开关项目：5，
距离：144
});
$（'#demo4'）。滚动框({
方向：‘h’，
开关项目：5，
距离：670
});
$（'#demo5'）。滚动框({
方向：‘h’，
距离：134
});
$（'#demo5 backward'）。单击（函数（）{
$（'demo5'）。触发器（'backward'）；
});
$（“#演示前进”）。单击（函数（）{
$（'demo5'）。触发器（'forward'）；
});
});
演示：您包含文件的顺序可能有问题 它是您应该首先包括的jQuery文件，并且只有在该文件之后才应该包括scrollbox
尝试一下，如果不让我们知道详细信息我已经用演示链接更新了答案，请检查并让我知道