Flexslider2示例：相同的代码，不同的结果（本地和jsfiddle）

Question

我已经在本地和jsfiddle上实现了Flexslider2。 每个使用完全相同的代码。 但是，当在Firefox，Chrome和IE9上本地查看我的页面时，Flexslide仅调整图像宽度。

jsfiddle http://jsfiddle.net/T64Gp/3/可以在保持图像长宽比的情况下产生所需的结果

我的本地代码（HTML）如下。 flexslider.css之外没有样式，jQuery和flexslider.js之外没有其他JavaScript。

的HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="flexslider.css">   
    </head>
    <body>        
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="1.jpg" alt="1" title="1">
            </li>
            <li>
                <img src="2.jpg" alt="2" title="2">
            </li>
            <li>
                <img src="3.jpg" alt="3" title="3">
            </li>
        </ul>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="flexslider.js"></script>
    <script>
        $('.flexslider').flexslider({});
    </script>
</body>
</html>

对于为什么会发生这种情况的任何见解将不胜感激。

Answer 1

您可以尝试以下两种建议：

上面的代码和jsFiddle使用的是不同版本的jQuery。 flexslider示例页面使用jQuery 1.9.1，所以也许最好现在就使用它

不过，最可能的原因是您应该使用以下命令初始化flexslider

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>  

这将确保在初始化flexslider之前加载页面内容。

祝好运！