文章/答案/技术大牛

发布

社区首页 >问答首页 >增强画廊效果的JavaScript代码

问增强画廊效果的JavaScript代码
EN

Stack Overflow用户

提问于 2012-04-24 20:22:03

回答 1查看 1.1K关注 0票数 0

我目前有一个小的JS画廊(onmouseover)。代码如下。我想要实现的是小图像，一次只显示几个。我在youtube上找到了我想要达到的效果的视频：video

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) ; } ;
    }

}

html

image

image-gallery

onmouseover

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-04-25 01:57:02

检查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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10297720

复制

相似问题

问增强画廊效果的JavaScript代码
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问增强画廊效果的JavaScript代码EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问增强画廊效果的JavaScript代码
EN