我正在为我的摄影网站使用 jquery 滚动器，但我无法让它工作。我使用这两个文件:
main.php
<html>
<head>
</head>
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>
<script type="text/javascript">
function show()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("display").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","thumbs.php",true);
xmlhttp.send();
}
</script>
</body>
</html>
还有thumbs.php
<html>
<head>
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
</div>
</div>
</div>
<script type="text/javascript">
jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>
AJAX 加载正常。其他一切看起来都很好。这里的问题是 div 内容根本不可滚动。它显示一切正确，但 div 内容未排列或可滚动，如下所示:
http://manos.malihu.gr/jquery-thumbnail-scroller (代码来源)
问题在于使用 AJAX 加载我的内容(这是强制性的)，但我不具备解决此问题的知识。有人可以帮我吗？
提前致谢。
在所有答案之后，这是工作代码(感谢@Abhidev):
main.php
<html>
<head>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>
<script type="text/javascript">
function show()
{
$.ajax({
url: "TESTE.php",
success: function(data) {
$('#display').html(data);
//Initiate the scroller here
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
});
}
</script>
</body>
</html>
thumbs.php
<html>
<head>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
</div>
</div>
</div>
</body>
</html>
最佳答案
既然你使用的是jquery，那么你就可以使用.ajax()方法
function show(){
$.ajax({
url: "thumbs.php",
success: function(data) {
$('#display').html(data); //Here is the change
//Initiate the scroller here
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
});
}
请参阅此了解更多详细信息和选项 http://api.jquery.com/jQuery.ajax/
关于javascript - 使用 AJAX 在 div 内滚动缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9844586/