图片滑动效果，坐等js高手

Question

    <div id="nav-left">  
            <div id="nav-left-up">  
                <span class="nav-left-up_1">NO IN HET THEATER </span>  
                <span class="nav-left-up_2">  
                <a href="#"><img src="image/31.jpg" width="11" height="7" /></a>  
                <a href="#"><img src="image/32.jpg" width="11" height="7" /></a>  
                <a href="#"><img src="image/31.jpg" width="11" height="7" /></a>  
                <a href="#"><img src="image/31.jpg" width="11" height="7" /></a>  
                </span>  
            </div>  
            <div id="nav-left-down">  
                   
                  <img src="image/6.jpg" class="undis" border="0">  
                    
                
           </div>  
      </div>  
要实现的是点击<span class=“nav-left-up_2”>里面的一个图片按钮（图片按钮是在加载js时候才会有的）， <div id = "nav-left-down"> 中就变成相应的图片 就是图片的滑动效果，但是页面上本身只有一个图片 ，如果我点击第二个小按钮，则用js自动把图片添加到<div id="nav-left-down">中， 但是我现在使用js不知道怎去写 。请高手知道的给我个代码实例。 

Answer 1

<img src="image/6.jpg" class="undis"  id="display" border="0">JS部分 
通过对<a>的onclick 事件的绑定来实现 
第一步 获取当前img的src 然后将其赋给 id为“display”的img
具体的操作你可以查阅一下JS手册  

Answer 2

给<span class="nav-left-up_2"添加click事件即可。并不一定就需要给它里面的img对象添加click事件
<script type="text/javascript">
    function loadImg(e) {
        var o = e.srcElement || e.target;
        if (o.tagName == 'IMG') {
            if (e.preventDefault) e.preventDefault();
            else e.returnValue = false;
            alert(o.src)
            document.getElementById('nav-left-down').innerHTML = '<img src="' + o.src + '" class="undis" border="0"> ';
        }
    }
</script>
   <div id="nav-left">  
            <div id="nav-left-up">  
                <span class="nav-left-up_1">NO IN HET THEATER </span>  
                <span class="nav-left-up_2" onclick="loadImg(event)">  
                <a href="#"><img src="image/31.jpg" width="11" height="7" alt="31" /></a>  
                <a href="#"><img src="image/32.jpg" width="11" height="7" alt="32" /></a>  
                <a href="#"><img src="image/31.jpg" width="11" height="7" /></a>  
                <a href="#"><img src="image/31.jpg" width="11" height="7" /></a>  
                </span>  
            </div>  
            <div id="nav-left-down">  
                   
                  <img src="image/6.jpg" class="undis" border="0">  
                    
                
           </div>  
      </div>  

Answer 3

怎么拿到点击的图片按钮的数组序号？for(var i=0 ; i<smallimgList.length ; i++){
 
  //smallimgList[i].onmouseover = function(){
//  alert(i);
 
    //  bigimgList.eq(i).attr("class","undis");//显示
//  bigimgList.eq(i-1).attr("class","dis");//隐藏
//  smallimgList.eq(i-1).attr("class","current"); //按钮颜色变换

if(smallimgList[i].onmouseover){
alert(i);
}  
 }
没有反应？

Answer 4

如果dispaly设置为none 意思就是这个div 不会显示出来即是隐藏。那图片滑动是不是用这个原理的？

Answer 5

结果的结果还是没有实现。希望出现奇迹我现在想用jquery来实现看看那位大虾给个例子

Answer 6

$(".nav-left-up_2").click(functiomn(){
    $(".nav-left-up_2 img").attr("src","想要显示的图片地址");
})

Answer 7

$(".nav-left-up_2").click(functiomn(){
    $(".nav-left-up_2 img").hide();
    $(".nav-left-up_2 img").attr("src","想要显示的图片地址");
    $(".nav-left-up_2 img").fadeIn("slow");
})仅供参考

Answer 8

<script type="text/javascript">
jQuery(function($){
//点击向上
$("#up").click(function(){
var dom = $("#father").children()[0];
var height = dom.style.height;
var marginTop = dom.style.marginTop;
var h = height.substring(0,height.length-2);
var t = marginTop.substring(0,marginTop.length-2);
var num = $("#father").children().length;
var mainTop =Number(h) - (Number(num))*(Number(h)+Number(5))+Number(2)*Number(5);
if(t == mainTop){
alert("当前是最后一页");
}else{
var result = Number(t)-Number(h)-Number(5);
dom.style.marginTop = result + "px";
}
}); $("#down").click(function(){
var dom = $("#father").children()[0];
var marginTop = dom.style.marginTop;
var height = dom.style.height;
var top = marginTop.substring(0,marginTop.length-2);
var h = height.substring(0,height.length-2);
if(top >= 0){
alert("当前为第一页");
}else{
var result = Number(top) + Number(h)+Number(5);
dom.style.marginTop = result + "px";
}
});
});
</script>
  <body>
    
    <form action="">
    
     <div style="width: 50px;height: 10px;background-color: green;cursor: pointer;" id="up">up</div>
     <div>
     <div id="father" style="width: 100px;height:200px;border-style: solid;border-width: 1px;margin-top:0px;overflow: hidden;">
     <%
     for(int i=0;i<10;i++){
     %>
     <div style="width:100px;height:188px;background-color: gray;margin-top: 5px;"><%=i %></div>
     <%} %>
     </div>
     </div>
     <div style="width: 50px;height: 10px;background-color: green;cursor: pointer;" id="down">down</div>
    </form>
  </body>
</html>