1

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

示例：http: //jsfiddle.net/rzTHw/

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

<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>​

查询：

$('.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);
                         });
        }
    });

我遇到的问题是：

  1. 创建一个“下一个”按钮，以便用户无需单击图像即可循环到下一个 div，从而避免打开新窗口以获取下一个图像。
  2. 单击最后一个 div 将窗口位置重定向到 URL，同时在a href单击图像时仍执行正常功能，即打开一个新窗口到该位置。否则，如果在显示最后一个 div 时单击“下一步”按钮，只需重定向用户。

解决这个问题的最佳方法是什么？谢谢！

4

2 回答 2

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 示例在这里。请注意，某些浏览器会阻止重定向，因为它在 iframe 中运行。但它应该在正常页面中工作。

于 2012-05-22T04:26:48.693 回答
0

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

他们中的大多数都提供内容是 html 而不仅仅是一张简单的图片，这样你就可以玩弄你想要的东西。

如果这是您想要完成的，还有 Fancybox、lightbox、colorbox 等。

于 2012-05-22T04:12:18.010 回答