자바 스크립트 슬라이드 쇼 (슬라이드 효과 추가)

문제가 있습니다. 이것은 자바 스크립트의 첫 번째 단계이며 Javascript 슬라이드 쇼를 만들려고합니다. "슬라이드 아웃"효과를 추가하려고합니다. 하지만 어떻게 할 수 있는지 알 수 없습니다. 약 2-3 시간이지만 아직 해결책이 없습니다. 나에게 도움이 좀 피드백을 제공하시기 바랍니다자바 스크립트 슬라이드 쇼 (슬라이드 효과 추가)

여기에 내가 JQuery와 조사 및 애니메이션 기능을 사용하는 것이 효과를 내 코드

<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

입니다하시기 바랍니다. 당신이 css를 이해하는 한 이것으로 가지고있을 재미의 짐이있다.

출처

2014-08-28 11:57:46 Catwood

답변 주셔서 감사합니다. jquery와 i에 대한 이해를 CSS로 봅니다. – TestBlub

자바 스크립트 슬라이드 쇼 (슬라이드 효과 추가)

답변

관련 문제