Question

我在我的摄影网站上使用了一个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>

Answer 1

因为您使用的是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/

使用AJAX在div内的缩略图滚动条

1 个答案: