-2

Jqueryを使用して画像スライダーを作成しようとしています。

私が持っているのは、画像付きの3つのサブdivを持つメインdivです。

このフィドルを見てください。フィドル

さて、思い通りのデザインを手に入れました。欠けているのは機能です。div または画像にカーソルを合わせると、時計回りのスライダーのように動作するようにします。

これは少し混乱するかもしれません。このデモを見てください。これは私が欲しいものです。

デモ

これは私が欲しいものです。右のdivは中央の画像 src で満たされ、中央のdivは左のdiv srcを取得します。左のdiv は、定義した画像の配列から新しいsrc を取得します。現在、一度に 1 つの画像 div しか変更できません。

ただし、これ以上プラグインを使用したくありません。Jqueryプラグインのみ。CSSのみのソリューションが最適ですが、それが可能になるとは思いません。

Jクエリ

    $('.maindiv img').mouseover(function () {
        var image = this;
        loop = setInterval(function () {
            if (i < images.length - 1) {
                i++;
                $(image).attr('src', images[i]);
            } else {
                i = 0;
                $(image).attr('src', images[i]);
            }

        }, 1500);

編集:私はこの作業の一部を得ることができました。これを確認してください。フェード効果を追加するだけで問題は、配列内の画像が終了した後、最初の画像がループバックしないことです...前にこれについて考えたことはありませんでした。

4

1 に答える 1

2

メイバイこのようなもの：

 jQuery(document).ready(function () {
    var images = [];
    var loop;
    var i = 0;

    images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1GfA01TRDgrh-c5xWzrwSuiapiZ6b-yzDoS5JpmeVoB0ZCA87";
    images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQSyUWiS4UUhdP1Xz81I_sFG6QNAyxN7KLGLI0-RjroNcZ5-HLiw";
    images[2] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_E_OgC6RiyFxKtw03NeWyelfRgJ3Ax3SnZZrufNkUe0nX3pjQ";

    $('img', '.maindiv').mouseover(function () {
        //Get divs inside main div and reverse them, so right is first
        var divs = $($('div','.maindiv').get().reverse());
        //Set up loop
        loop = setInterval(function(){
            divs.each(function(key, div){
                if (divs[key+1])
                {
                    //All divs gets image src from previous div > img
                    $('img', div).attr('src', $('img', $(divs[key+1])).attr('src'));
                }
                else
                {
                    //This is left div
                    if (images && images[i])
                    {
                        //If picture url not in array then add it
                        if ($.inArray($('img', div).attr('src'), images) == -1)
                        {
                            images.push($('img', div).attr('src'));
                        }
                        $('img', div).attr('src', images[i]);
                        i++;
                        if (i>= images.length) i = 0;
                    }
                }
            });
        }, 1500);
    }).mouseout(function(){
        clearInterval(loop);
    });
});

フィドル

于 2013-07-30T12:53:17.417 に答える