0

5秒ごとにdivに配置された画像をスクロールする小さなdivスライダーを作成しました。また、スライドをすぐにトリガーする2つの矢印が側面にあります。これは重要ではありません。画像が左または右にスライドするとき、または自動的にスライドするときはいつでも、単にスライドするのではなく、フェードやカットなどのアニメーションが画像に発生するようにしたいと考えています。

Javascript コード:

 <script type="text/javascript">
            function createSlider(el_left, el_right, items) {
    var index = 0;
                var refreshId;
                var items=$('.box');
                var restartAnimation = function() {
                    clearInterval(refreshId);
                    refreshId = setInterval( function() 
                    {    
                        var $this = items.eq(index);
        $this.animate({
            left: '-50%'
        }, 500);
        index = (index + 1) % items.length;
        var $next = items.eq(index);
        $next.css('left', '150%');
        $next.animate({
            left: '50%'
        }, 500);
                    },5000);
                }

                restartAnimation()

    el_left.click(function() {
                    restartAnimation();
        var $this = items.eq(index);
        $this.animate({
            left: '-50%'
        }, 500);
        index = (index + 1) % items.length;
        var $next = items.eq(index);
        $next.css('left', '150%');
        $next.animate({
            left: '50%'
        }, 500);
    });
    el_right.click(function() {
        restartAnimation();
        var $this = items.eq(index);
        $this.animate({
            left: '150%'
        }, 500);
        index = (index - 1) % items.length;
        var $next = items.eq(index);
        $next.css('left', '-50%');
        $next.animate({
            left: '50%'
        }, 500);
    });
}

createSlider($('.Animate'), $('.Animate2'), $('.box'))
        </script>

HTML コード:

        <div id="container" class="imageSlider">

          <div id="box1" class="box"><img style="height: 190px;width: auto;vertical-align: middle;margin: 0px 50px 12px 0px;" src="images/image1.png" class="emages"></div>
          <div id="box2" class="box"><img style="height: 185px;width: auto;vertical-align: middle;" src="images/image2.png" class="emages"></div>
          <div id="box3" class="box"><img style="height:264px;margin-top:0px;margin-left: 200px;width:auto;" src="images/image3.png" class="emages"></div>
          <div id="box4" class="box"><img style="height: 265px;width: auto;vertical-align: middle;margin: 51px 60px 0 -31px;" src="images/image4.png" class="emages"></div>
          <div id="box5" class="box"><img style="height: 194px;width: auto;vertical-align: middle;" src="images/image5.png" class="emages"></div>
          <div id="box6" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="images/image6.png" class="emages"></div>
          <div id="box7" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="images/image7.png" class="emages"></div>

     <div><input type="image" id="animate1"  src="nav-left.png" class="Animate"></div>
     <div><input type="image" id="animate2" src="nav-right.png" class="Animate2"></div>

</div>

CSS コード:

#container {
    position: absolute;
    margin: 120px auto;
    padding: 0px;
    width: 700px;
    height: 350px;
    overflow: hidden;
    left: 24%;

}

.box {
    position: absolute;
    width: 100%;
    height: 300px;
    line-height: 300px;
    font-size: 15px;
    text-align: center;    
    left: 150%;
    top: 84px;
    margin-left: -48%;
    color: white;
}

#box1 {

    left: 50%;
}

#box2 {

}

#box3 {

}

#box4 {

}

#box5 {

}
#box6 {

}
#box7{

}

これが私の完全なコードです。そして、それは適切に機能しています。私が望むのは、画像がスクロールするときに、スタイルまたはアニメーションでスクロールすることだけです。

4

1 に答える 1

0

私は次のことをします：

1) フェードを処理するクラスを CSS に追加します。

.fade-in {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade-out {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

2) 次に、コードの適切な場所でクラスを追加/削除します。次に例を示します。

$this.removeClass('fade-in');
$this.addClass('fade-out');

$next.removeClass('fade-out');
$next.addClass('fade-in');
于 2012-12-27T00:42:17.150 に答える