갤러리 효과 향상을위한 JavaScript 코드

현재 JS 갤러리 (onmouseover)가 작습니다. 코드는 다음과 같습니다. 내가 성취하고자하는 것은 작은 이미지이며, 한 번에 몇 개의 이미지 만 표시됩니다. video 갤러리 효과 향상을위한 JavaScript 코드

HTML (부호 생략) :

<div id="imagecontent"> 
    <img id="about_mojang" src="images/about_mojang_small.jpg" alt="Plain Mojang Logo"> 
    <img id="about_lego" src="images/about_lego_small.jpg" alt="Minecraft Lego"> 
    <img id="about_cteam" src="images/about_cteam_small.jpg" alt="Cartoon of the Mojang team"> 
    <img id="about_minecraftmojang" src="images/about_minecraftmojang_small.jpg" alt="Minecraft logo of Mojang"> 
    <img id="about_team" src="images/about_team_small.jpg" alt="Photo of the Moajgn team"> 
    <img id="about_wall" src="images/about_wall_small.jpg" alt="A wall in the Mojang office"> 
</div> 
<div id="bigimage"></div> 
<script>window.onload=addImages() ;</script> 
</body>

JS (부호 생략)

function showPic(i_element) { 
    var source = i_element.getAttribute("id") ; 
    source = "images/"+source+".jpg" ; 
    var alt = i_element.getAttribute("alt") ; 

    var i = document.createElement("img") ; 
    i.setAttribute("src",source) ; 
    i.setAttribute("alt",alt) ; 

    var placeholder = document.getElementById("bigimage") ; 
    if (placeholder.childNodes.length != 0) 
    { placeholder.removeChild(placeholder.childNodes[0]); } 
    placeholder.appendChild(i) ; 

} 


// add the onclick event to the DOM 
function addImages() { 
    var item = document.getElementById("imagecontent").getElementsByTagName("img") ; 
    for (var i=0 ; i<item.length ; i++) { 
     item[i].onmouseover = function() {showPic(this) ; } ; 
    } 

}

출처

2012-04-24 Dan1676

체크 jsfiddle 출력 내가하려는 영향의 무비 비디오 달성 발견 : http://jsfiddle.net/srinivasan/EfyKe/

이런 식으로 시도하십시오

<html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <script src="http://code.jquery.com/jquery-latest.js"></script> 
      <script type="text/javascript"> 
      function showPic(i_element) { 
       var source = i_element.getAttribute("id") ; 
       source = "images/"+source+".jpg" ; 
       var alt = i_element.getAttribute("alt") ; 

       var i = document.createElement("img") ; 
       i.setAttribute("src",source) ; 
       i.setAttribute("alt",alt) ; 

       var placeholder = document.getElementById("bigimage") ; 
       if (placeholder.childNodes.length != 0) 
       { placeholder.removeChild(placeholder.childNodes[0]); } 
       placeholder.appendChild(i) ; 

      } 


      // add the onclick event to the DOM 
      function addImages() { 
       var item = document.getElementById("imagecontent").getElementsByTagName("img") ; 
       for (var i=0 ; i<item.length ; i++) { 
        item[i].onmouseover = function() {showPic(this) ; } ; 
       } 


      } 





      </script> 
      <style> 

      </style> 
      </head> 
      <body> 
      <div id="bigimage" style="height:50px; width:100px; border:1px solid red; margin:0 auto;"></div> 
      <div id="prev" style=" width:50px; height:25px; float:left;" ><img src="http://dummyimage.com/25x25/900/FFF.jpg&text=PREV" /></div> 

      <div id="imagecontent" style="width:400px; margin:0 auto; border:1px solid red; height:50px;position:relative; overflow:hidden; "> 
      <div id="slider" style="width:400px; float:left; overflow:hidden; position:absolute; " > 

       <img id="about_mojang" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Plain Mojang Logo"> 
       <img id="about_lego" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Minecraft Lego"> 
       <img id="about_cteam" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Cartoon of the Mojang team"> 
       <img id="about_minecraftmojang" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Minecraft"> 
       <img id="about_team" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Photo of the Moajgn team"> 
       <img id="about_wall" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="A"> 
       <img id="about_team" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Photo of the Moajgn team"> 
       <img id="about_team" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Photo of the Moajgn team"> 
       <img id="about_wall" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="A"> 

      </div> 
      </div> 
      <div id="next" style=" float:right; width:25px; height:25px;"><img src="http://dummyimage.com/25x25/900/FFF.jpg&text=NEXT" /></div> 

      <script>window.onload=addImages() ;</script> 
      <script type="text/javascript"> 
      var i=0; 
      var speed=5; 
       $("#next").click(function(){ 
        i=document.getElementById('slider').style.left; 
        i=(i.replace("px","")); 
        for(j=0;j<speed;j++){ 
       $("#slider").animate({left:i},"fast"); 
       i=i-60; 
        } 

       }); 


      $("#prev").click(function(){ 
       i=document.getElementById('slider').style.left; 
       i=(i.replace("px","")); 
       if(i!='0'&&i<'0'){ 
        for(j=0;j<speed;j++){ 
       $("#slider").animate({left:i},"fast"); 
       i=parseInt(i)+parseInt(60); 
        } 
       } 
       else{ 
        $('#prev').attr('disabled', ''); 
       } 
       }); 
      </script> 
      </body> 
      </html>

출처

2012-04-24 17:57:02 srini

작동하지 않지만 도움을 주셔서 감사합니다. 올바른 경로로 저를 데려 가야합니까 – Dan1676

내보기가 당신의 비디오와 비슷합니까? 아닙니다. – srini

나는 이것이 페이지의 다른 코딩 때문이라고 생각합니다. 그것은 한 지점으로 작업하고있었습니다. everthign 적합 등 일부 코드를 편집해야합니다 아직 그 사이트의 다른 섹션에서 일하고 있지만 아직 귀하의 도움을 주셔서 감사합니다 – Dan1676

갤러리 효과 향상을위한 JavaScript 코드

답변

관련 문제