Question

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

我的问题是我还希望在页面加载时以不同的方向旋转它们（依次旋转）几度，以实现“分散”的外观。 jQuery Rotate也做得很好......我的问题是我无法在同一页面上进行旋转和循环。

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

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

我正在使用标准的jquery.cycle ... html预装这样的第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使用canvas，因此仅适用于图像。如果我能提供更多信息，请告诉我。谢谢你的兴趣！

Answer 1

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

<强> 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 options的完整列表。

Answer 2

尝试使用CSS3变换选择器：

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

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

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

2 个答案: