0

我在这里有一个 jsfiddle - http://jsfiddle.net/ZrHfu/1/

演示在这里 - http://www.ttmt.org.uk/forum/thumb_test/

我正在尝试创建一个响应式缩略图轮播 - 我已经看到插件可以做到这一点，但它们都需要相同大小的图像，我需要不同大小的图像。

这是非常基本的 - 向左浮动的图像列表，溢出：隐藏在容器上。

我有左/右按钮，当单击按钮时，我试图用图像向左/向右移动 ul。

仅连接右侧按钮。

我的问题是它只能工作一次。

如果单击右键，图像向左移动，再次单击它，没有任何反应。

为什么它只工作一次。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

      <link rel="stylesheet" href="css/master.css" />

      </head>

    <body>


        <a class="arrow left">&larr;</a>

        <div class="thumbs">

          <ul>

            <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/11.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/12.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/13.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/14.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/15.jpg" /></a></li>

          </ul>
        </div>

        <a class="arrow right">&rarr;</a>


        <script src="js/hel.js"></script>

    </body>

    </html>
4

1 回答 1

1

如果单击右键，图像会向左移动，因为您将.thumbs类 div 的宽度应用到ul元素的左侧。第二次您尝试应用已设置为左侧ul元素的相同宽度。所以这就是为什么什么都没有发生。

解决方案： 您需要检索ul元素的左值并将其添加到.thumbs类的宽度并将值应用于animate函数。

我更新了代码以进一步移动。看看：http: //jsfiddle.net/ZrHfu/2/

于 2013-04-30T15:11:17.457 回答