1

我想为带有 4 个图标和下方小圆圈的移动滑块创建一个，当每 4 个图标更改时（也应与 spiwe 一起使用），在 FlexSlider http://flexslider.woothemes.com/index 中找到并示例。 html

在我的 index.html 页面中构建图像列表并添加 CSS 文件

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

index.html 中的 javaScript 函数

 $(document).ready(function () {
                  $('.flexslider').flexslider({
                      animation: "slide",
                      animationLoop: false,
                      itemWidth: 80,
                      itemMargin: 5
                  });
              });

但它不像在网站上那样工作，它设置了一个没有任何图像的白色行......我的错误在哪里有什么想法吗？

4

1 回答 1

1

Document readyjQuery Mobile由于jQuery Mobile处理页面加载的方式，不能与一起使用。

要了解有关页面事件的更多信息，其与文档准备的区别请查看此文章或在此处找到。

工作jsFiddle示例：http: //jsfiddle.net/Gajotres/CPpBD/

基本上你所要做的就是改变这个：

$(document).ready(function () {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 80,
        itemMargin: 5
    });
});

对此：

$(document).on('pageshow', '#index', function(){       
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false
    });
});

pageshow您可以在我在请求此答案时发布的链接中阅读有关事件的更多信息。

于 2013-03-14T16:14:16.747 回答