Java脚本幻灯片放映（添加幻灯片效果）

我有一个问题这是我在JavaScript中的第一步，我试图做一个Javascript幻灯片放映。我尝试添加“滑入”“滑出”效果但我不知道我该如何做到这一点。我谷歌约2-3小时，但仍然没有解决方案。请帮助我，给我一些意见，请Java脚本幻灯片放映（添加幻灯片效果）

这里是我的代码

<head> 
    <title>Test Slider</title> 
</head> 

<body> 
    <div id="slider" style="width: 400px; height: 200px;color: orange; font-weight: bold; font-size: 30px;font-family: sans-serif" onclick="javascript:superlink()" style="cursor:pointer;"></div> 
    <script type="text/javascript"> 
     //Init// 
     var SlideDauer = 2000; 
     var ImgInX = 0; 
     var ImgInXposition = 0; 
     var background = 'url(http://www.flashforum.de/forum/customavatars/avatar47196_1.gif)'; 
     var SldInX = 0; 
     var LinkInX = 0; 

     function superlink() { 
      if (!SliderKannEsLosGehen()) return false; 
      if (LinkInX >= SliderBilder.length) { 
       LinkInX = 0; 
      } 
      var Ziel = window.location.href = SliderLink[LinkInX]; 
      ++LinkInX; 
     } 

     var SliderBilder = new Array(); 
     SliderBilder.push("http://ds.serving-sys.com/BurstingRes//Site-80313/Type-0/721dbabb-2dd5-4d92-9754-7db9c5888f48.jpg"); 
     SliderBilder.push("http://bytes.com/images/bytes_logo_a4k80.gif"); 
     SliderBilder.push("http://cdn.qservz.com/file/df8e9dcf202cfddedf6f2d4d77fcf07b.gif"); 
     SliderBilder.push("http://ds.serving-sys.com/BurstingRes//Site-80313/Type-0/721dbabb-2dd5-4d92-9754-7db9c5888f48.jpg"); 
     //SliderBilder.push("http://www.flashforum.de/forum/customavatars/avatar47196_1.gif"); 

     var SliderTitle = new Array(); 
     SliderTitle.push(""); 
     SliderTitle.push("Title 1"); 
     SliderTitle.push("Title 3"); 
     SliderTitle.push("Title 4"); 
     //SliderTitle.push("Title 5"); 

     var SliderLink = new Array(); 
     SliderLink.push("http://www.google.de"); 
     SliderLink.push("http://spiegel.de"); 
     SliderLink.push("http://bing.com"); 
     SliderLink.push("http://youtube.com"); 
     //SliderLink.push ("http://www.flashforum.de/forum/customavatars/avatar47196_1.gif"); 

     function SliderKannEsLosGehen() { 
      if (SliderBilder.length < 2) return false; 
      return true; 
      if (SliderTitle.length < 2) return false; 
      return true; 
     } 

     //Run// 
     function SliderRun() { 

      if (!SliderKannEsLosGehen()) return false; 
      if (ImgInX >= SliderBilder.length) { 
       ImgInX = ImgInXposition; 
      } 
      if (SldInX >= SliderBilder.length) { 
       SldInX = 0; 
      } 
      document.getElementById("slider").style.backgroundImage = 'url(' + SliderBilder[ImgInX] + ')'; 
      ++ImgInX; 
      document.getElementById("slider").innerHTML = SliderTitle[SldInX]; 
      ++SldInX; 
      window.setTimeout("SliderRun()", SlideDauer); 
     } 
     window.setTimeout("SliderRun()", SlideDauer); 
    </script> 
</body> 

</html>

来源

2014-08-28 TestBlub

对于影响我会看看jQuery和使用动画功能。只要你对CSS有一个了解，就可以获得很多乐趣。

来源

2014-08-28 11:57:46 Catwood

谢谢你的答案我看看jquery和我的理解css – TestBlub 2014-08-28 12:13:51

Java脚本幻灯片放映（添加幻灯片效果）

回答

相关问题