1

我只想使用 JavaScript 升级图像数组。我在下面添加了缩略图，因此单击缩略图时可以显示更大的图像。问题发生在我单击“上一个”或“下一个”（单击缩略图后）后，当前图像未隐藏，下一个或上一个图像显示在其右侧。有时它是正确的，有时不是......如果可以，请提供帮助。先感谢您。

<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 = "";
}
4

1 回答 1

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


});

这是示例

于 2013-06-16T11:20:43.520 回答