开始图像div

Question

我有一个<div>包含图像（在div's内），您可以通过点击nav控件进行查看。 我的问题是我怎样才能从一个特定的图像启动（加载）图像的div？ 那么例如，从数组中的第三个图像开始？

HTML：

<div id="imagePanel"> 
    <div id="images"> 
     <div> <img src="http://placehold.it/250x387/bb5533/000000"></div> 
     <div> <img src="http://placehold.it/250x387/ffff33/000000"></div> 
     <div> <img src="http://placehold.it/250x387/feef33/000000"></div> 
     <div> <img src="http://placehold.it/250x387/dd4433/000000"></div> 
    </div> 
    </div> 
     <div id="imageNav"> 
      <a id="prev">prev</a><br /> 
      <a id="next">next</a> 
     </div> 

JS：

var imgsize = 387; 
$('#images').data('top',0); 
len = $('#images').children().length; 
$('#images').data('max',len * (-imgsize)); 

$(document).ready(function() { 

    $('#prev').click(function(){ 
     currTop = $('#images').data('top') + (imgsize); 
     if (currTop == imgsize) { 
      return; 
     }  

     $('#images').css('top',currTop.toString()+"px"); 
     $('#images').data('top',currTop); 
    }); 

    $('#next').click(function(){  
     currTop = $('#images').data('top') - (imgsize); 
     if (currTop == $('#images').data('max')) { 
      return; 
     }  

     $('#images').css('top',currTop.toString()+"px"); 
     $('#images').data('top',currTop); 
    }); 

}); 

CSS：

#imagePanel{ 
    width:280px;   
    height:390px; 
    background:#aa44dd; 
    border:4px solid #bbbb33; 
    overflow-x:hidden; 
    overflow-y:hidden; 
    margin:auto; 
} 

#images{ 
    width:250px;   
    position:relative; 
    overflow:hidden; 
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    padding:0px 0px 0px 0px; 
} 

#images > div { 
    height:387px;    
    margin:0 auto; 
    padding:0px 0px 0px 0px; 
} 

Answer 1

如果你想选择在top的third图像，然后在document.ready function

$('#images').css('top',-(3*imgsize)+"px");//showing third image so 3 
$('#images').data('top',-(3*imgsize)); 

完整的代码试试这个

$(document).ready(function() { 
    $('#prev').click(function(){ 
     currTop = $('#images').data('top') + (imgsize); 
     if (currTop == imgsize) { 
      return; 
     }  
     $('#images').css('top',currTop.toString()+"px"); 
     $('#images').data('top',currTop); 
    }); 

    $('#next').click(function(){  
     currTop = $('#images').data('top') - (imgsize); 
     if (currTop == $('#images').data('max')) { 
      return; 
     }  
     $('#images').css('top',currTop.toString()+"px"); 
     $('#images').data('top',currTop); 
    }); 
    $('#images').css('top',-(3*imgsize)+"px"); 
    $('#images').data('top',-(3*imgsize)); 
}); 

小提琴http://jsfiddle.net/jEmQ7/

Answer 2

像这样，其中图像NUMBER是所需要的图像的零基于位置：

function gotoImage(imagenumber){ 
     var top=imagenumber*imgsize; 
     if(top > 0){ 
     top = 0; 
     } 
     if(top < $('#images').data('max')){ 
     top = $('#images').data('max'); 
     } 
     $('#images').css('top',top.toString()+"px"); 
     $('#images').data('top',top) 
    }