1

コードが立っているので、アニメーションを最初の画像をスライドさせてから2番目の画像をスライドインさせ、2番目の画像をスライドアウトさせ、3番目の画像をスライドインさせようとしています。

var s = 0,
    t = 2000;

$(document).on('ready', slide);

function slide(){
 var speed = setInterval(slider, t);
}

function slider(){
 s++;
 var sld  = $('#slider img'),
     imgs = sld.length;
 if(s == imgs){
 s = 0;
 }

sld.animate({'marginLeft': '+=750px'}, t).fadeOut('fast').animate({'marginLeft': '-=750px'}, t).eq(s).fadeIn(t);
}

jFiddleデモ

4

2 に答える 2

1

.fadeOut/.fadeInを.slideToggleに置き換えてみてください

sld.animate({'marginLeft': '+=750px'}, t)
    .slideToggle('fast')
    .animate({'marginLeft': '-=750px'}, t)
    .eq(s)
    .slideToggle(t);
于 2012-12-14T18:24:20.703 に答える
1

<ul>最初に、順序なしリスト ( )を使用して構造を少し変更する必要があります。

<div id="slider">
    <ul>
        <li><img src="http://placehold.it/750x250/75c8c8/fff&text=1"></li>
        <li><img src="http://placehold.it/750x250/b775c8/fff&text=2"></li>
        <li><img src="http://placehold.it/750x250/c8bd75/fff&text=3"></li>
        <li><img src="http://placehold.it/750x250/c87575/fff&text=4"></li>
    </ul>
</div>​

setTimeout()次に、アニメーションが完了したら次のスライドが確実に開始されるように、 setInterval の代わりに を使用する必要があります。

var s = 0,
    t = 2000,
    timer;

$(document).on('ready', slide);

function slide(){
    timer = setTimeout(slider, t);
}

function slider(){
    s++;
    var sld  = $('#slider li'),
    imgs = sld.length;
    if(s == imgs){
        s = 0;
    }
    sld.eq(s-1).animate({'left': '750px'}, t, function() {
        sld.eq(s).animate({'left': '0px'}, t, function() {
            speed = setTimeout(slider, t);
        });
    });
}

このようにして、画像を右にスライドさせ、次に次の画像を左にスライドさせ、最後にタイムアウトを指定して「slider()」関数を再度呼び出します。

これを機能させるには、css コードを次のように変更する必要があります。

#slider {
    height:250px;
    width:750px;
    margin:20px auto;
}

#slider ul {
    width: 100%;
    height: 100%;
    list-style: none;
    overflow: hidden;
    border: 1px solid grey;
    position: relative;
}

#slider​ ul li {
    position: absolute;
    left: 750px;
}

#slider ul li​:first-child {
    left: 0px;
}​

ここでDEMOを見ることができます

于 2012-12-14T19:12:46.343 に答える