Question

我只想升级image arrays using JavaScript。我在下面添加了缩略图，因此单击缩略图时可以显示更大的图像。点击“prev”或“next”（点击拇指后）后出现问题，当前图像未被隐藏，下一个或前面的图像显示在其主页上。有时候它做得对，有时候没有......如果可以，请帮忙。提前谢谢。

<div id="bigImages" style="height:550px; overflow:hidden;">
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="url big image 1"></div>
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="url big image 2"></div>
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img  src="url big image 3"></div>
</div>

<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

<br/>

<div id="smallImages">
<a href="#" onclick="show('0')"><img class ="small" src="url small image 1"></a>
<a href="#" onclick="show('1')"><img class ="small" src="url small image 2"></a>
<a href="#" onclick="show('2')"><img class ="small" src="url small image 3"></a>
</div>

的Javascript

<script type="text/javascript">
var imgArr = document.getElementById('bigImages').getElementsByTagName('img');

for(var i=1; i<imgArr.length; i++){
imgArr[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
    if(i===0){
        imgArr[i].style.display = "none";
        i=imgArr.length-1;
        imgArr[i].style.display = "";
    }
    else{
        imgArr[i].style.display = "none";
        i--;
        imgArr[i].style.display = "";
    }
}

document.getElementById('next').onclick = function(){
    if(i===imgArr.length-1){
        imgArr[i].style.display = "none";
        i=0;
        imgArr[i].style.display = "";
    }
    else{
        imgArr[i].style.display = "none";
        i++;
        imgArr[i].style.display = "";
    }
}

function show(dptr) {
        for (var i=0; i<imgArr.length; i++){
        imgArr[i].style.display = 'none';
    }

    imgArr[dptr].style.display = "";
}

Answer 1

嗯......我想出了这个解决方案：

HTML +风格

<div id="bigImages" style="height:550px; overflow:hidden;">
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg"></div>
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"></div>
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img  src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png"></div>
</div>

<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

<br/>

<div id="smallImages">
<a href="#" onclick=""><img class ="small" src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg"></a>
<a href="#" onclick=""><img class ="small" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"></a>
<a href="#" onclick=""><img class ="small" src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png"></a>
</div>
<style>
#smallImages img{
width:20px;    

}
</style>

脚本

var imgArrbig = document.getElementById('bigImages').getElementsByTagName('img');

for(var i=1; i<imgArrbig.length; i++){
imgArrbig[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
    if(i===0){
        imgArrbig[i].style.display = "none";
        i=imgArrbig.length-1;
        imgArrbig[i].style.display = "";
    }
    else{
        imgArrbig[i].style.display = "none";
        i--;
        imgArrbig[i].style.display = "";
    }
}

document.getElementById('next').onclick = function(){
    if(i===imgArrbig.length-1){
        imgArrbig[i].style.display = "none";
        i=0;
        imgArrbig[i].style.display = "";
    }
    else{
        imgArrbig[i].style.display = "none";
        i++;
        imgArrbig[i].style.display = "";
    }
}
 rr = 0 
$('.small').each(function(){

 $(this).attr('number',''+ rr +'');
   rr = rr+1              
});
$('.small').click(function(i){
    var compare = $(this).attr('number');
    $('#bigImages img').css('display','none');
    $(imgArrbig[compare]).css('display','block');


});

Here就是示例

使用JavaScript中的display属性的缩略图图像数组

1 个答案: