JavaScript中使用display属性的带有缩略图的图像数组
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');
});
下面是一个例子
相关文章:
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 用较大的图像交换缩略图
- 不应选择缩略图优先图像
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 缩略图图像滑块
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 图像库缩略图滑块
- 缩略图库的XML数据图像绑定
- Jquery循环页面缩略图图像-保留主图像链接标签
- 从缩略图图像显示屏幕范围的版本
- 在网格中显示缩略图图像,并扩展预览
- 如何在缩略图图像的翻转上显示弹出窗口?Javascript、CSS
- 如何将交替类添加到缩略图图像的动态提要
- 当点击不同的2个缩略图图像时,页面跳转
- Jquery/Javascript缩略图图像问题
- 如何使图片库将显示图像更改为缩略图图像?
- Woocommerce缩略图图像交换
- Photowipe缩略图图像大小问题 - 尝试调整缩略图大小以获得统一的外观
- 如何将缩略图图像附加到 DIV 时以特定模式定位它们
- 在chrome浏览器中,它如何显示全尺寸的图像url,当用户在我的网站上拖动缩略图图像