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

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);
                         });
        }
    });

私が問題を抱えているのは：

  1. 「次へ」ボタンを作成して、ユーザーが画像をクリックせずに次のdivに移動できるようにします。これにより、次の画像に移動するために新しいウィンドウを開く必要がなくなります。
  2. a href最後のdivをクリックすると、ウィンドウの場所がURLにリダイレクトされますが、画像がクリックされた場合は、新しいウィンドウをその場所に開くという通常の機能を実行します。それ以外の場合、最後の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サイクルはほんの一例です。たくさんあります。jqueryスライドショーまたはjqueryサイクルをグーグルで検索し、最適なものを選択してください。サイクルプラグイン自体には、ページを離れることなく表示された画像のコンテンツを変更できる「ページャー」の例がいくつかあります。

それらのほとんどは、コンテンツを単なる画像ではなくhtmlにすることを提供しているため、必要なものを正確に試すことができます。

Fancybox、lightbox、colorboxなどもあります。それがあなたが達成しようとしていることなら。

于 2012-05-22T04:12:18.010 に答える