如何添加轉換到我目前的JavaScript代碼？

-4

我目前正在開發一個網站項目，並且使用在線YouTube tutorial將滑塊的代碼（JavaScript）放在一起。如何添加轉換到我目前的JavaScript代碼？

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      var imagecount = 1; 
      var total = 2; 

      function slide (x){ 
       var Image = document.getElementById('img'); 
       imagecount = imagecount + x; 
       if(imagecount > total){imagecount = 1;} 
       if(imagecount < 1){imagecount = total;} 
       Image.src = "images/img"+ imagecount +".png"; 
      } 

      window.setInterval(function slideA() { 
       var Image = document.getElementById('img'); 
       imagecount = imagecount + 1; 
       if(imagecount > total){ imagecount = 1;} 
       if(imagecount < 1){ imagecount = total;} 
       Image.src = "images/img"+ imagecount +".png"; 
      },5000); 

     </script> 
    </head> 
    <title></title> 
     <body onload="slideA()" > 

     <div id="container"> 
      <div id="header"> 
      <div id="logo"> 
       <img src="big states.png" alt="Logo"> 
      </div> 
      </div> 

      <div id="nav"> 
       <ul> 
        <li><a class="active" href="#home">HOME</a></li> 
        <li><a href="#menu">MENU</a></li> 
        <li><a href="#about">ABOUT</a></li> 
        <li><a href="#gallery">GALLERY</a></li> 
        <li><a href="#reviews">REVIEWS</a></li> 
        <li><a href="#contact">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 

     <div id="bgimg"> 
      <img src="sliderbackground.jpg"> 
     </div>  
     <div class="slidercontainer"> 
      <img src="images/img1.png" id="img"> 
       <div id="arrow-right"><img href="#" onclick="slide(1)"  src="arrow-right.png" class="right" onmouseover="this.src='right-hover.png';"  onmouseout="this.src='arrow-right.png';" /> </div> 
       <div id="arrow-left"><img href="#" onclick="slide(-1)"  src="arrow-left.png" class="left" onmouseover="this.src='left-hover.png';"  onmouseout="this.src='arrow-left.png';" /> </div> 

     </div> 

    </body> 
</html>

然而教程並沒有表現出如何添加過渡到滑塊，這就是我需要幫助的。

有兩種過渡效果我找它們是：

的OnLoad的形象應該淡入
改變時，圖像應該向左滑動。

來源

2016-03-10 CodingJunkie

請留下一個鏈接到YouTube的教程。 – Lux

https://www.youtube.com/watch?v=7DcoiLed2iY – CodingJunkie

如果你甚至不打算在評論中提出什麼意見，爲什麼？ OP是新的SO，爲什麼不嘗試幫助！ TROLLS –

看看css轉換和/或動畫。

你可以只更新CSS在你的Javascript代碼：

CSS

#img { 
    /* Initialize with 0% opacity (invisible) */ 
    opacity: 0%; 

    /* Use prefix for cross browser compatibility */ 
    transition: opacity 1s; 
    -o-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -webkit-transition: opacity 1s; 
}

的Javascript

Image.onload = function(){ 
    this.style.opacity = "100%"; 
}

您可以使用相同的技術與刷卡left財產與relative在CSS中的位置。

它添加到代碼

var imagecount = 1; 
var total = 2; 

function slide (x){ 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + x; 
    if(imagecount > total){imagecount = 1;} 
    if(imagecount < 1){imagecount = total;} 
    Image.src = "images/img"+ imagecount +".png"; 

    Image.style.opacity = "0%"; // Reset the opacity to 0% when reloading the image ! 
} 

window.setInterval(function slideA() { 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + 1; 
    if(imagecount > total){ imagecount = 1;} 
    if(imagecount < 1){ imagecount = total;} 
    Image.src = "images/img"+ imagecount +".png"; 

    Image.style.opacity = "0%"; // Reset the opacity to 0% when reloading the image ! 
},5000);

然後，只需將其添加在HTML節點：

<img src="images/img1.png" id="img" onload="this.style.opacity = '100%'">

來源

2016-03-10 22:48:10 Nasso

感謝您的迴應，在添加CSS和JavaScript代碼後，預覽滑塊時仍未做任何更改。關於JavaScript，它將被放置在代碼中的當前腳本標記中嗎？ – CodingJunkie

@CodingJunkie這確實是一個問題，因爲你的瀏覽器緩存了圖像，所以'onload'函數沒有被調用。看看這個技術來解決這個問題http://stackoverflow.com/a/5933319/4760242 – Nasso

謝謝你，但是在改變提供給我自己的代碼的例子中提供的代碼方面仍然有點丟失。 – CodingJunkie

如何添加轉換到我目前的JavaScript代碼？

回答

相關問題