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 に答える