0

Webcenter ポータルの誰かによって実装されたカルーセル アイテムがあります。HTMLコード、CSSファイル、およびJSがあります。

私が今持っている問題は、カルーセルに 5 つの画像があり、自動スライドしているときに発生します。カルーセルが 5 番目のアイテムに到達するのを待ち、最初のアイテムにスクロールして戻るのを確認します。スクロールバックすると、最初に直接移動するのではなく、すべての画像を循環します。

予想される動作は、5 番目のスライドから 1 番目のスライドに直接スクロールする必要があることです。私はこの特定の JS についてあまり経験がありません。この特定の動作を正確に確認する必要がある場所と、変更を行う場所を正確に知りたいです。

4

1 に答える 1

0

あなたの質問は簡単です。5 枚目のスライドの後、次のスライドは 1 枚目と続きます。これで 1 番目に進みますが、逆の順序で続きます。通常は。

このコードでは、ソリューションが得られます。

このコードを試してください。jsfiddle

jqueryコード

  $('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
        $slideContainer.animate({
            'margin-left': '-=' + width + 'px'
        }, animationSpeed, function () {
            currentSlide++;
            if (currentSlide >= $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
});

html

<body>
    <div id="container">
        <div id="header">
                <h3>J-Slider</h3>

        </div>
        <div class="slider">
            <ul>
                <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
                </li>
                <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
                </li>
                <li>
                    <img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
                </li>
                   <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
                </li>
            </ul>
        </div>
    </div>
</body>

CSS

body {
    font-family:Gerogia;
    font-size:15px;
}
#container {
    width:930px;
    margin:50px auto 10px auto;
    border-left:#666 solid 3px;
    border-right:#666 solid 3px;
    background:#f5f5f5;
    padding:20px 30px;
}
#header {
    padding:10px 0;
    border-bottom:#ccc solid 1px;
    overflow:hidden;
    text-align:center;
}
h3 {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.slider {
    width: 750px;
    height: 400px;
    padding-top: 10px;
    margin-left: 75px;
    overflow: hidden;
}
.slider ul {
    width:8000px;
    list-style-type:none;
}
.slider li {
    float: left;
}
于 2014-07-17T07:56:38.317 に答える