jQuery - 簡單圖像旋轉器

在小提琴上我找到了一個簡單的旋轉器，並試圖使它在我的死亡簡單的HTML頁面中工作。jQuery - 簡單圖像旋轉器

頁例子是在這裏：

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Demo</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <style> 
     img { max-height: 100px } 
     .rotator img { max-height: 200px; border: dashed 5px pink; } 
    </style> 
    <script> 
     $(document).ready(function() { 
      alert('aaa'); 
      var $rotator = $(".rotator"); 
      $rotator.find("img:gt(0)").hide(); 
      setTimeout(Rotate, 1000); 

      function Rotate() { 
       var $current = $rotator.find("img:visible"); 
       var $next = $current.next(); 
       if ($next.length == 0) $next = $rotator.find("img:eq(0)"); 
       $current.hide(); 
       $next.show(); 
       setTimeout(Rotate, 5000); 
      } 

     }); 
    </script> 
    </head> 
    <body> 

<img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/> 
<img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/> 
<img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/> 

<div class="rotator"> 
    <a href="http://google.com"> 
     <img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/> 
    </a> 
    <a href="http://google.com"> 
     <img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/> 
    <a> 
    <a href="http://google.com">  
     <img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/></a> 
</div> 

<label /> 


    </body> 
</html>

簡單的腳本應定期切換圖像，但不是那些剛剛顯示所有3張照片。並且不顯示警報消息。我試過調試代碼，當我刪除功能Rotate()時，頁面上會顯示一條警告消息。

爲什麼功能Rotate()不工作？

來源

2012-11-18 user984621

$.next()獲得集合中的直接元素。您的套餐只包含可見圖像 - 即只有一個。怎麼會有下一個元素？

工作小提琴：http://jsfiddle.net/gjzd7/

所有我做的是改變了$.next()呼叫到$.index()請求和模ED它通過圖像的數量（所以你永遠不會得到一個不存在的圖像）。讓我知道你是否需要修改它或任何解釋！

來源

2012-11-18 15:56:26

謝謝你，它的工作原理旋轉圖像！ – user984621

您也可以將圖像緩存在jQuery數組中，並像下面一樣遍歷它們。

var imgs = $(".slides"); // images to be rotated 
var current = 0; 

function rotate() { 
    // set current to next image 
    current = current >= imgs.length ? 0 : current + 1; 
    $(".rotator").prop("src", $(imgs.get(current)).prop("src")); 
    setTimeout(rotate, 5000); 
} 

rotate();

例here

來源

2012-11-18 16:23:07 Bruno

使用這個簡單的腳本使用按鈕

function rotateImage(degree) { 
    $('#demo-image').animate({ transform: degree }, { 
     step: function(now,fx) { 
      $(this).css({ 
       '-webkit-transform':'rotate('+now+'deg)', 
       '-moz-transform':'rotate('+now+'deg)', 
       'transform':'rotate('+now+'deg)' 
      }); 
     } 
     }); 
    } 

<style> 
#demo-image{padding:35px 15px;} 
.btnRotate {padding: 15px 20px;border:1px solid #000; background-color:#999;color: #000;cursor: pointer;} 
</style> 


<div style="height:600px; width:800px; background-color:#CCC; border:1px solid #000; border-radius:6px; margin-left:auto; margin-right:auto;"> 
<div style="width:550px; margin-left:auto; margin-right:auto;"> 
<label>Rotate Image:</label> 
<input type="button" class="btnRotate" value="30" onClick="rotateImage(this.value);" /> 
<input type="button" class="btnRotate" value="60" onClick="rotateImage(this.value);" /> 
<input type="button" class="btnRotate" value="90"onClick="rotateImage(this.value);" /> 
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" /> 
<input type="button" class="btnRotate" value="-180" onClick="rotateImage(this.value);" /> 
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" /> 
</div> 
<div style="width:350px; margin-left:auto; margin-right:auto; margin-top:25px;"><img src="image-rotating-script-using-jquery .jpg" id="demo-image" /></div> 
</div>

Here is the example

來源

2017-01-18 10:53:37

jQuery - 簡單圖像旋轉器

回答

相關問題