提高畫廊效果的JavaScript代碼

我目前有一個小型的工作JS畫廊（onmouseover）。代碼如下。我想要實現的是小圖像，一次只顯示少量圖像。我發現的影響YouTube視頻我想實現：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 2012-04-25 10:33:36

我的例子是喜歡你的視頻還是不是？ – srini 2012-04-25 10:44:20

我認爲這是由於頁面上的其他編碼。它正在努力。需要編輯一些代碼以避免混亂等。還沒有完成，因爲我在網站的其他部分工作，但再次感謝您的幫助 – Dan1676 2012-04-26 11:06:30

提高畫廊效果的JavaScript代碼

回答

相關問題