Question

我这里有一个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>

Answer 1

如果单击右键，图像将向左移动，因为您将.thumbs类div的宽度应用于ul元素左侧。第二次尝试将已经设置为左边的相同宽度应用于ul元素。所以这就是没有任何反应的原因。

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

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

响应式缩略图轮播

1 个答案: