Question

我在一个页面上有4个div，我想要隐藏所有这些除了一个，有点像幻灯片，当我点击按钮时它会加载下一张图片。有没有办法用<div>执行此操作？默认情况下使用一个按钮加载第一个按钮，该按钮允许加载下一个按钮并从页面中删除第一个按钮，并最好循环显示？

Answer 1

看看这个js。我刚刚发现了这种特殊技术，但如果不合适，还有其他方法。

$('#prev').click( function() {
    $('.num.ind').prev().addClass("ind");
        $(".num.ind").next().removeClass("ind");
});

$('#next').click( function() {
    $('.num.ind').next().addClass("ind");
         $(".num.ind").prev().removeClass("ind");
});

这是一个文字而不是图像的小提琴，但用图像替换是微不足道的： http://jsfiddle.net/7jsojqbq/1/

Answer 2

抓住图像DIV并循环隐藏除第一个之外的所有图像。然后获取按钮并附加到它的点击事件另一个循环通过DIV寻找一个未隐藏的事件。当发现做几件事时，先隐藏它，然后为下一个循环设置一个标志。在下一个循环中，设置标志，显示当前DIV，并重置标志。

如果循环运行后仍然设置了标志，则表示我们需要显示第一个图像DIV。

JSFiddle here.

var divs = document.getElementsByTagName('div');
Array.prototype.slice.call(divs).forEach(function(elem, idx) {
    if ( idx ) {
        elem.style.display = 'none'
    }
})

var button = document.getElementsByTagName('button')[0]
button.addEventListener('click', function() {
    var found = 0
    Array.prototype.slice.call(divs).forEach(function(elem) {
        if ( found ) {
            elem.style.display = 'block'
            found = 0
        }
        else if ( elem.style.display !== 'none' ) {
            elem.style.display = 'none'
            found = 1
        }
    })
    if ( found ) { divs[0].style.display = 'block' }
})

示例HTML：

<div><img src="..."/></div>
<div><img src="..."/></div>
<div><img src="..."/></div>
<div><img src="..."/></div>

<button>Next</button>

脚本并不关心有多少DIV。

点击按钮加载/删除Div

2 个答案: