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

像这样的图像编号是所需图像的从零开始的位置：

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

Answer 2

如果您想在third上选择top图片，请在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/

开始图像div

2 个答案: