jQuery 슬라이더가 제대로 작동하지 않습니다.

맞춤 슬라이더를 개발했습니다. 하나의 이미지 애니메이션 만 발생하고 다른 이미지는 표시되지 않습니다. 애니메이션으로 다른 이미지를 어떻게 보이나요?jQuery 슬라이더가 제대로 작동하지 않습니다.

<html> 
    <head> 
     <title>TODO supply a title</title> 

     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <style type="text/css"> 
     .Slider 
     { 
      width: 800px; 
      height: 350px; 
      overflow: hidden; 
      margin: 30px auto; 
      background-image:url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif); 
      background-repeat: no-repeat; 
      background-position: center; 
     } 
     .Shadow 
     { 
      background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx); 
      background-repeat: no-repeat; 
      background-position: top; 
      width: 864px; 
      height: 144px; 
      margin: -60px auto; 

     } 
     .Slider img{ 
      width: 800px; 
      height: 350px; 
      display: none; 
     } 


     </style> 


     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 

      function Slider() 
      { 
       $(".Slider #1").show("fade",500); 
       $(".Slider #1").delay(5500).hide("slide",{direction:'left'},500); 
      } 
      var slderCount=$(".Slider img.").size(); 
      var count=2; 

      setInterval(function() 
      { 
       $("Slider #"+count).show("slide",{direction:'left'},500); 
       $("Slider #"+count).delay(5500).hide("slide",{direction:'left'},500); 

       if(count==slderCount) 
       { 
        count=1; 
       } 
       else 
       { 
        count=count+1; 
       } 
      },6500); 


     </script> 


    </head> 
    <body onload="Slider();"> 
     <div class="Slider"> 
      <img id="1" src="http://accessengsl.com/wp-content/files_mf/1.jpg" border="0" alt="Helping develop"/> 
      <img id="2" src="http://accessengsl.com/wp-content/files_mf/trincokanthaleroad.jpg" border="0" alt="Helping concrete" /> 
      <img id="3" src="http://accessengsl.com/wp-content/files_mf/08_new.jpg" border="0" alt="no develop" /> 

     </div> 
     <div class="Shadow"> </div> 

    </body> 
</html>

출처

2014-04-05 VenushkaT

'var slderCount = $ (". Slider img."). 크기();'- typo -'img.'는'img'이어야합니다. – Deryck

Trym

setInterval(function() 
      { 
       $(".Slider #"+count).show("slide",{direction:'left'},500); 
       $(".Slider #"+count).delay(5500).hide("slide",{direction:'left'},500); 

       if(count==slderCount) 
       { 
        count=1; 
       } 
       else 
       { 
        count=count+1; 
       } 
      },6500);

출처

2014-04-05 07:06:44

변경 var slderCount=$(".Slider img.").size();

에

var slderCount=$(".Slider img").length;

출처

2014-04-05 07:08:48

저를 위해 작동하지만 그 때 3 개의 이미지가 완료되면 반복 이미지 어떻게 내가 그것을 고칠 수 있습니다. – VenushkaT

이미지는 계속 진행됩니다. 3 개의 이미지가 갈 때 GIF 만 loding됩니다. – VenushkaT

당신은 무엇을 원합니까? 그들은 주기로 가야합니까? –

귀하의 슬라이더 카운트 선택이 잘못되었습니다 :

var slderCount=$(".Slider img.").size();

할까요 be :

var slderCount = $(".Slider").find("img").length;

그러나 솔직히 말해서, 당신은 바퀴를 다시 발명하고 있습니다. tinycarousel 또는 다른 슬라이더 플러그인을 사용하십시오.

출처

2014-04-05 07:12:44 martynas

jQuery 슬라이더가 제대로 작동하지 않습니다.

답변

관련 문제