0

私はかなり長い間この問題に悩まされており、解決策を見つけるためにGoogleで数え切れないほどの時間を検索しましたが、役に立ちませんでした.

ここに私の問題があります

カルーセルの背後にあるロジックを知りたいのですが、ユーザーがそれぞれのボタンにカーソルを合わせたときに右から左に、またはその逆にスライドさせたいと考えています。

mouseenterで連続的にアニメーション化するにはどうすればよいですか?

どんな助けでも大歓迎です。ありがとうございました ：）

これがJSFIDDLEです： http://jsfiddle.net/neoragex/qXseV/

4

2 に答える 2

2

バージョンを更新しました。チェックしてください:) http://jsfiddle.net/qXseV/2/

私がしたことは、.mid クラスの css に次を追加することです。

position:absolute;
top:20px;

そして、setIntervalを次のように変更しました：

timer = setInterval(function() {slide();}, 400);

編集: 左右両方の動きを持つ追加の jsfiddle http://jsfiddle.net/qXseV/7/

于 2012-05-09T09:09:20.670 に答える
0

タイマーの実装でいくつかの調整を行い、要素に位置がある場合にのみ使用できるleft valueを操作しているため、スライドする要素で欠落している css position:relativeを修正しました。

HTML

<div id="leftarrow">HOVER</div>
<div class="mid"></div>

CSS

.mid {
    clear: both;
    border: 1px solid black;
    background-color: green;
    width: 100px;
    height: 100px;    
    position: relative;
}
#leftarrow {
    float: left;
    border: 1px solid black;
    margin-bottom: 4px;
    cursor: pointer;
}

Jクエリ

// declare variables
var timer;
var speed = 400;

// slide function
function slide() {
    return setInterval(function() {
        $(".mid").animate({
            'left': '+=20px'
        }, 200);
    }, speed);
}

// hover event for the button
$("#leftarrow").hover(function() {
    timer = slide();
}, function() {
    clearInterval(timer);
});

ここでフィドルを参照してください！

于 2012-05-09T09:24:45.547 に答える