[英]Image arrays with thumbnails using display property in JavaScript
我只想使用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 = "";
}
好吧...,我想出了這個解決方案:
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');
});
這是例子
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.