如何一起使用 jquery.rotate 和 jquery.cycle 插件

Question

我有一系列照片（实际上是 3 个系列）需要循环，jQuery 循环插件非常适合我。

我的问题是我还想在页面加载时以不同的方向将它们旋转（依次旋转）几度，以实现“分散”的外观。 jQuery Rotate 也很好地做到了这一点...我的问题是我无法在同一页面上同时发生旋转和循环。

看起来解决方案似乎涉及在循环代码本身内旋转图像，但这超出了我的有限能力（至少在可用的时间内）。 还有其他人尝试过这个吗？ 有任何指点吗？

如果一切都失败了，我可以在 Photoshop 中预先旋转图像，但这并不理想——js 旋转意味着网站所有者只需将新图像转储到目录中即可轻松刷新照片。 Photoshop otoh 意味着旋转每一个 - 并将它们从 jpg 转换为支持透明度的格式（或者更糟糕的是，在正确的位置复制适当的背景颜色等）。

我正在使用标准 jquery.cycle... html 预加载第 1 个 3 个图像，如下所示：

<div id="slideshow" class="pics">  
    <img class="rotate" src="images/image1.jpg" width="100" height="100" />  
    <img class="rotate" src="images/image2.jpg" width="100" height="100" />  
    <img class="rotate" src="images/image3.jpg" width="100" height="100" />  
</div>

我有通常的 js 来启动循环：

$(document).ready(function() {       

   var stack = [];  

   var imagesPath = '../images/image';  
   if(window.location.href.indexOf('\/html\/') == -1)  
      imagesPath = 'images/image';  

      for (var i = 0; i < 8; i++) {  
      var img = new Image(100,100);  
      img.src = imagesPath + i + '.jpg';  
      $(img).bind('load', function() {  
          stack.push(this);  
      });  
   }  

   // start slideshow  
   $('#slideshow').cycle({  
      timeout:  600,  
      before:   onBefore ,  
      speed: 2000  
   });  

   // add images to slideshow  
   function onBefore(curr, next, opts) {  
     if (opts.addSlide) // <-- important!  
          while(stack.length)  
         opts.addSlide(stack.pop());  
   };  
});

使用 jQuery.rotate 旋转这些图像中的第一个的 js 是：

$('.rotate')[0].rotateLeft(5);

上面如果我禁用骑行，则有效，但当骑行开启时，什么也不会发生。 根据以下内容删除数组引用会旋转可见图像，将其从幻灯片中删除，并将其保留在页面上。

$('.rotate').rotateLeft(5);

也许理想的情况是旋转包含的 div，但 jquery.rotate 使用画布，因此仅适用于图像。 如果我可以提供更多信息，请告诉我。 感谢您的关注！

Answer 1

JQuery Cycle 将大量 CSS 添加到容器的直接子图像中，以便将它们转换为幻灯片。 如果您想将图像散布在幻灯片上，则应将每张幻灯片的内容包装在标签中。 然后使用 slideExpr 选项告诉 JQuery 循环这些元素实际上是幻灯片。

Html

<div id="slideshow">
    <div class="slide">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>

    <div class="slide">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

Javascript

$('#slideshow').cycle({  
    slideExpr: '.slide',
    timeout:  600
});

这将允许 Jquery 循环将其样式应用到包装器，并且 JQuery 旋转将旋转应用到每张幻灯片内的内容，而不会踩到彼此的脚趾。

以下是 JQuery Cycle 选项的完整列表。

Answer 2

尝试使用 CSS3 转换选择器：

 -webkit-transform: rotate(-15deg);

$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });