0

そのため、現在、スライドショーのように複数の画像を含む「ボタン」を作成しています。マウスオーバーすると、画像が別の画像に変わります。

ただし、技術的にはマウスが画像上にないため、スライドショー画像が変更されるたびに、MouseOver 効果が削除されて MouseOut 状態になります。

また、ボタンにフェード効果を持たせようとしましたが、ほとんどの検索で、MouseOver と MouseOut の代わりにホバー関数を使用することになりました。

潜在的な機能の点で、Hover が MouseOver よりも優れているかどうか疑問に思っています。

ホバーなどでスライドショーイベントを一時停止することはできますか? そして、どうすればそれを行うことができますか？

これが私の現在のコードです：

関数.js

$(function () {

    $('#01 img:gt(0)').hide();
    setInterval(function () {
        $('#01 :first-child').fadeOut(1500)
           .next('img').fadeIn(1500)
           .end().appendTo('#01');
    },
      3000);
});

$(document).ready(function () {

    $("#image1").mouseover(function () {
        $(this).attr("src", "images/board_01_over.jpg");
    });

    $("#image1").mouseout(function () {
        $(this).attr("src", "images/board_01_01.jpg");
    });
});

main.css

    #board {
    float: left;
    width: 998px;
    overflow: hidden;
}


.fadein {

    float: left;
    position: relative;
    width: 240px;
    height: 140px;
    margin: 1px 1px 1px 1px;
}

    .fadein img {
        position: absolute;
        left: 0;
        top: 0;
        height: 140px;
        opacity: 0.6;
        overflow: hidden;
    }

        .fadein img:hover {
            opacity: 1;
        }

Main.html

     <div id="board">
         <div class="fadein" id="01">
             <img src="images/board_01_01" id="image1" />

             <img src="images/board_01_02.jpg" id="image2" />
         </div>

     </div>
4

1 に答える 1

0

jQueryを使用しているので、関数を利用できhover()ます。

http://api.jquery.com/hover

$("#image1").hover(function () {
    $(this).attr("src", "images/board_01_over.jpg");
},

function () {
    $(this).attr("src", "images/board_01_01.jpg");
});

スライダーの場合は、それから小さなオブジェクトを作成する方が簡単なので、制御しやすくなります.

var Slideshow = {
    interval:null,

    start: function () {
        ...
        initialize
        ...
        // catch the interval ID so you can stop it later on
        this.interval = window.setInterval(this.next, 3000);
    },

    next: function () {
        /*
         * You cannot refer to the keyword this in this function
         * since it gets executed outside the object's context.
         */
        ...
        your logic
        ...
    },

    stop: function () {
        window.clearInterval(this.interval);
    }
};

簡単に電話できるようになりました

Slideshow.start();
Slideshow.stop();

どこからでもスライダーを開始および停止できます。

于 2013-05-14T17:20:15.183 に答える