本文介绍了使用AJAX的div内的缩略图滚动器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的摄影网站使用一个jQuery滚动器，但我无法使其正常工作.我正在使用这两个文件:
Im using a jquery scroller for my photography website which i cannot get it to work. Im using these two files:
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的内容没有排列或滚动，如下所示:
AJAX is loaded fine. Everything else looks fine. The problem here is that the div content is simply not scrollable. It shows everything correct but the div content is nor arranged or scrollable as it's shown in:
http://manos.malihu.gr/jquery-thumbnail-scroller (代码的来源)
问题在于使用AJAX加载我的内容(这是强制性的)，但是我不具备解决此问题的知识.有人可以帮助我吗?
The problem lies in the use of AJAX to load my content (which is mandatory) but i do not have the knowledge to work this problem out. Anyone can help me, please?
谢谢.
所有答案之后，这里是工作代码(感谢@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()方法
since you are using jquery, then simply you can make use of the .ajax() method
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/
Refer thsi for more details and options http://api.jquery.com/jQuery.ajax/
这篇关于使用AJAX的div内的缩略图滚动器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！