0

我有一系列需要循环的照片（实际上是 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 使用画布，因此仅适用于图像。让我知道我是否可以提供更多信息。并感谢您的关注！

4

2 回答 2

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 选项的完整列表。

于 2011-12-30T11:31:51.383 回答
0

尝试使用 CSS3 变换选择器：

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

$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });
于 2010-07-22T20:35:00.640 回答