簡單的JavaScript圖像旋轉器

我有一個網站上的簡單圖像旋轉器，包含4個圖像，在顯示下一個圖像之前必須出現幾秒鐘。它似乎在第一個週期工作，但是當它回到第一個圖像時，它不會顯示那個圖像，但會從第二個圖像再次運行，等等，每個週期都會丟失該圖像。該函數在主體中使用onLoad EH調用。在身體裏面有一張img，裏面有我的第一張圖片。我是一個小菜，所以如果我錯過了任何東西，請溫柔。這裏就是我有...簡單的JavaScript圖像旋轉器

<body onLoad="sunSlideShow()"> 

    <img src="IMAGES/slider1.gif" alt="slide-show" id="mySlider" width="900"> 

<body> 




var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif"); 

var i = 0 


function sunSlideShow() 
{ 
    document.getElementById("mySlider").src = ("IMAGES/" + quotes[i]); 

    if (i<4) 
    { 
     i++; 
    } 

    else 

     i = 1; 

    setTimeout("sunSlideShow()", 3000); 

} 
sunSlideShow()

來源

2014-02-14 Orbital676

將'i = 1'更改爲'i = 0'。 – ElendilTheTall

該死！我爲什麼沒有看到。謝謝。 – Orbital676

更改它以這樣的：

else i = 0; setTimeout("sunSlideShow()", 3000);

來源

2014-02-14 11:19:59 lshettyl

===================== =============================================

編輯：這是錯誤的...請在這個頁面上找到我的其他答案。

============================================== ====================

首先，我不會使用...你最好用jQuery啓動腳本一旦頁面是加載。

添加到您的頭部分：

<script type="text/javascript"> 
    $(function() { 
     sunSlideShow(); 
    } 
</script>

一旦頁面加載這將觸發sunSlideShow功能。

然後，您將開始使用var i = 0進行幻燈片演示......但是當您已經到達第四個圖像時，您將它設置爲1？

我會試圖使用while循環來實現你想要的。

事情是這樣的：

<script type="text/javascript"> 
$(function() { 
    sunSlideShow(); 
} 
var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif"); 
var i = 0; 
function sunSlideShow(){ 
    while (i<4) 
     { 
      document.getElementById("mySlider").src = ("IMAGES/" + quotes[i]); 
      if (i<4) 
       { 
        i++; 
       } 
      else 
       { 
        i = 0; 
       } 
      sleep(3000); 
     } 
} 
function sleep(miliseconds){ 
    var currentTime = new Date().getTime(); 
    while (currentTime + miliseconds >= new Date().getTime()){} 
} 
</script>

該腳本尚未經過測試......但一旦在頁面加載它應該啓動sunSlideShow功能，然後改變圖像的每3秒。

來源

2014-02-14 11:30:55

我認爲這裏最好使用[setInterval]（https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval）。 – Johnny

葉 - 我正在玩jsfiddle，發現你是對的！ –

這是一個使用setInterval http://jsfiddle.net/pq6Gm/12/的工作版本 –

而且我的其他答案（！這是錯誤的）...試試這個：

http://jsfiddle.net/pq6Gm/13/

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     setInterval(sunSlideShow,3000); 
    }); 
    var quotes = [ 
     "http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2007/07/11/sun128.jpg", 
     "http://icons.iconarchive.com/icons/robinweatherall/seasonal/128/sun-icon.png", 
     "http://www.astronomytoday.com/images/sun3.gif", 
     "http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png" 
    ]; 
    var i = 0; 
    function sunSlideShow() { 
     document.getElementById("mySlider").src = quotes[i]; 
     if (i < (quotes.length-1)) 
      { 
       i++; 
      } 
     else 
      { 
       i = 0; 
      } 
    } 
</script> 
<body> 
    <img src="http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png" id="mySlider"/> 
</body>

來源

2014-02-14 12:22:35

我得在網上搜索，試圖找到一個旋轉的問題，一般的解決方案關於其中心的圖像。我想出了我自己的完美解決方案。基本概念很簡單：將整個上下文旋轉所需的角度（這裏稱爲「傾斜」）;在NEW座標系中計算圖像的座標;畫圖;最後，將上下文旋轉回原來的位置。這裏是代碼：

 var xp = rocketX * Math.cos(tilt) - rocketY * Math.sin(tilt); 
     var yp = rocketX * Math.sin(tilt) + rocketY * Math.cos(tilt); 
     var a = rocketX - xp; 
     var c = Math.sqrt(a*a + (rocketY-yp)*(rocketY-yp)); 
     var beta = Math.acos(a/c); 
     var ap = c * Math.cos(tilt + beta); 
     var bp = c * Math.sin(tilt + beta); 
     var newX = rocketX + ap; 
     var newY = rocketY - bp; 
     context.rotate(tilt); 
     context.drawImage(littleRocketImage, newX-9, newY-40);   
     context.rotate(-tilt);

在倒數第二行，常量'9'和'40'是圖像大小的一半;這確保旋轉的圖像被放置爲使得其中心與原始圖像的中心重合。

一個警告：我只用於第一象限旋轉;您必須爲改變組件標誌的其他象限進行標準測試。

來源

2014-03-31 14:47:04 user3470600

簡單的JavaScript圖像旋轉器

回答

相關問題