Question

这是我到目前为止所拥有的内容，它允许用户单击图像以打开新窗口并转到某个位置。发生单击时，父窗口中的图像将替换为下一个div。

到目前为止，这是工作代码......

<div class = "box"><a href="link1.html" target="_blank"><img src="http://placehold.it/300x150/cf5/&text=img+1"></a></div>
<div class = "box"><a href="link2.html" target="_blank"><img src="http://placehold.it/300x150/f0f/&text=img+1"></a></div>
<div class = "box"><a href="link3.html" target="_blank"><img src="http://placehold.it/300x150/fb1/&text=img+1"></a></div>
<div class = "box"><a href="link4.html" target="_blank"><img src="http://placehold.it/300x150/444/&text=img+1"></a></div>

Jquery的：

$('.box').not(':first').hide();
$('.box a').click(
    function(e){
        e.preventDefault();
        var newWin = window.open(this.href,'newWindow'),
            that = $(this).closest('.box'),
            duration = 1200;
        if (that.next('.box').length){
            that.fadeOut(duration,
                         function(){
                             that.next('.box').fadeIn(duration);
                         });
        }
    });

我遇到的问题是：

创建“下一个”按钮，这样用户就可以在不点击图像的情况下循环切换到下一个div，从而避免打开新窗口进入下一个图像。
点击最后一个div会将窗口位置重定向到网址，同时仍然执行正常功能，即在单击图像时打开a href位置的新窗口。否则，如果在显示最后一个div时单击“下一步”按钮，则只需重定向用户。

最好的方法是什么？谢谢！

Answer 1

这是我尝试调整代码以允许下一个按钮，我最好猜测你想要为最后一个图像发生什么：

var redirectUrl = 'http://www.google.com'; // replace in your code

function next(event, duration) {
    duration = duration || 1200; // default value
    var that = $('.box:visible');
    if (that.next('.box').length) {
        that.fadeOut(duration, function() {
            that.next('.box').fadeIn(duration);
        });
    } else {
        window.location.href = redirectUrl;
        // the above line doesn't work inside jsFiddle, but should on your page
    }
    return false;
}

$('.box').not(':first').hide();
$('.box a').click(

function(e) {
    e.preventDefault();
    var newWin = window.open(this.href, 'newWindow'),
        duration = 1200;
    next(e, duration);
});
$('.next').click(next);

jsFiddle example here。请注意，某些浏览器会阻止重定向，因为它在iframe中运行。但它应该在正常的页面中工作。

Answer 2

也许看一下幻灯片jquery插件。 JQuery Cycle只是一个例子。有很多。只需谷歌jquery幻灯片或jquery循环，并选择最适合你的那个。循环插件本身有许多“寻呼机”示例，可让您在不离开页面的情况下更改所显示图片的内容。

他们中的大多数都提供内容为html而不仅仅是简单的图片，因此您可以随心所欲地使用它。

还有Fancybox，灯箱，彩盒等，如果这是你想要完成的。

卡住：用下一个按钮隐藏/显示div，重定向最后一个div

2 个答案: