响应缩略图转盘

问题描述：

我这里有一个的jsfiddle - http://jsfiddle.net/ZrHfu/1/响应缩略图转盘

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

我试图创建一个负责任的缩略图旋转木马 - 我见过的插件来做到这一点但它们都需要图像相同的尺寸，我需要有不同尺寸图片的东西。

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

我有左/右按钮，当按钮被点击时，我正在尝试将图片左右移动。

只连接右侧按钮。

我的问题是它只能使用一次。

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

它为什么只能工作一次。

<!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>

答

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

解决方案： 你需要找回左值ul元素并将它添加到.thumbs类的宽度和应用价值animate功能。

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

欢迎我亲爱的朋友:) – Unknown 2013-04-30 16:11:14

相关推荐