Матрицы изображений с эскизами с использованием свойства отображения в JavaScript

Я просто хочу обновить image arrays using JavaScript. Я добавил миниатюры ниже. Таким образом, изображение большего размера может отображаться при щелчке по щелчку. Проблема возникает после того, как я нажимаю «prev» или «next» (после нажатия на значок), текущее изображение не скрыто, а следующее или четкое изображение отображается на его стороне. Иногда это правильно, иногда нет ... пожалуйста, помогите, если сможете. Заранее спасибо.Матрицы изображений с эскизами с использованием свойства отображения в 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 = ""; 
}

источник

2013-06-16 Phillip

хорошо ..., я пришел к этому решению:

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 пример

источник

2013-06-16 11:20:43 Pumpkinpro

Спасибо, но ссылки на миниатюры для меня не работают. Весь скрипт должен быть в теге

Смежные вопросы

Матрицы изображений с эскизами с использованием свойства отображения в JavaScript

ответ

Смежные вопросы