如何在javascript滑塊中淡入淡出？

我創建了一個使用JavaScript代碼的滑塊，我想在其中添加一些像淡入淡出的運動效果。如何在javascript滑塊中淡入淡出？

這裏是我的代碼：

<script type="text/javascript"> 
     <!-- 
     var image1=new Image() 
     image1.src="1.jpg" 

     var image2=new Image() 
     image2.src="2.jpg" 

     var image3=new Image() 
     image3.src="3.jpg" 

     var image4=new Image() 
     image4.src="4.jpg" 
     //--> 
    </script> 

<script> 
    <!-- 
    var step=1 
    function slideit() 
    { 
     document.images.slide.src=eval("image"+step+".src") 
     if(step<4) 
     step++ 
     else 
     step=1 
     setTimeout("slideit() ",3500) 
    } 
    slideit() 
    //--> 
    </script>

是否有褪色或其他運動的任何代碼？

任何幫助，將不勝感激。

在此先感謝。

來源

2013-06-05 Mina Hafzalla

你嘗試過什麼？我推薦jQuery'animate'函數。試一試。 –

好'jQuery'有'fadeIn（）'和'fadeOut（）' – Spokey

是的，有這些類型的東西開發的整個jquery插件。 easySlider是其中一個，flexSlider是另一個。 Bootstrap有一個他們稱爲旋轉木馬的滑塊，雖然只有滑動效果，但添加交叉漸變相當容易。

來源

2013-06-05 21:53:21

看代碼，有幾件事情必須絕對改變：

許多相似的元素必須放入array，而不是在許多類似的命名變量。
不要使用eval，事實上，殺死它與火，所以它不會回來。 eval是濫用以彌補缺乏能力的關鍵字。

然後，褪色和運動，你可以看看這些sliders，如果需要定製其中的一個使用jQuery。理想情況下，您不必自己處理圖像元素，因爲它是滑塊的工作。

來源

2013-06-05 22:05:21

給幻燈片容器一個id i.g. 「images」，那麼你可以創建img dom元素並將其附加到容器中，然後每3.5秒更改它的源代碼並使用jquery爲不透明度（fadeIn）設置動畫。

$(document).ready(function() { 
    var src = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; 
    var slide = 0; 
    var img = new Image(); 
    document.getElementById('images').appendChild(img); 

    function slideit() { 
     img.style.opacity = 0; 
     img.src = src[slide % 4]; //%4 will reset the counter to 0 after 3. 
     img.onload = function() { 
      $('#images img').animate({ 
       'opacity': 1 
      }, 500); 
      slide++; 
     }; 
     setTimeout(slideit, 3500); 
    } 
    slideit(); 
});

jsfiddle

來源

2013-06-05 22:39:20 razzak

如何在javascript滑塊中淡入淡出？

回答

相關問題