在向左滑动时，创建滑块和滑块不会重置位置

Question

'use strict';
$(function(){
    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;



    var $slider = $('#slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');
    var $slidesleft = $slideContainer.find('.left');
    var $slidesright = $slideContainer.find('.right');

    var interval;

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



    function stopSlider(){
            clearInterval(interval);
    };
    $('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);

startSlider();


    $('#slidebttn .right').on('click',      function (){
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
                    currentSlide++;
                    if (currentSlide === $slides.length) {
                            currentSlide = 1;
                            $slideContainer.css('margin-left', 0); 
                    }
            });
    }       );

    $('#slidebttn .left').on('click',       function (){
            $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
                    currentSlide--;
                    if (currentSlide === 0) {
                            currentSlide = $slides.length;
                            $slideContainer.css('margin-left', 720);       
                    }

            });
    }       );
});

好的，这是我正在使用的代码。一切正常，直到我尝试滑动滑块到左边。它不会重复到正确的位置。截至目前，右侧滑动按钮工作正常，没有任何问题，但它拒绝向左滑动。我可能没有适当滑动的任何原因吗？

Answer 1

让我们开始吧！

对于你的HTML： 通常的做法是在第一个图像之后克隆第一个图像，然后在第一个图像之前克隆第一个图像，这样就可以创建连续滑动的幻觉。你忘了把你的最后一张图片放在第一张图片之前！ （您可以使用https://api.jquery.com/clone/我没有fiddle）。

所以，你需要从第二张幻灯片开始，这就是为什么我在slide元素中添加了margin-left：750px。

你的CSS：一切都还可以。

你的javascript：请阅读js代码中的注释。代码可能会更好，但我认为现在更容易实现。如果您有任何疑问，请不要犹豫！

＆＃13;

＆＃13;

'use strict';
$(function () {
    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('#slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');
    var $slidesleft = $slideContainer.find('.left');
    var $slidesright = $slideContainer.find('.right');

    var interval;

    function startSlider() {
        interval = setInterval(function () {
            currentSlide++;
            //if this is the last image5 then go to the first image1 and current is slide 2
            if (currentSlide == ($slides.length)) {
                $slideContainer.css('margin-left', "-" + width + "px");
                currentSlide = 2;
            }
            // Go to the next slide as usual
            $slideContainer.animate({
                'margin-left': "-" + (width * currentSlide) + "px"
            }, animationSpeed);
        }, pause);
    }



    function stopSlider() {
        clearInterval(interval);
    };
    $('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);

    startSlider();


    $('#slidebttn .right').on('click', function () {
        currentSlide++;
        //if this is the last image5 then go to the first image1 and current is slide 2
        if (currentSlide == ($slides.length)) {
            $slideContainer.css('margin-left', "-" + width + "px");
            currentSlide = 2;
        }
        // Go to the next slide as usual
        $slideContainer.animate({
            'margin-left': "-" + (width * currentSlide) + "px"
        }, animationSpeed);
    });

    $('#slidebttn .left').on('click', function () {
        currentSlide--;
        // Go to the prev slide as usual
        $slideContainer.animate({
            'margin-left': "-" + (width * currentSlide) + "px"
        }, animationSpeed, function () {
            // If you are at the first image5 then go to the last and current slide is slide 6 (slides-2)
            if ($slideContainer.css('margin-left') == '0px') {
                $slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px")
                currentSlide = $slides.length - 2;
            }
        });
    });



});

＆＃13;

body {
    margin:0px;
}
@font-face {
    font-family: speculum;
    src: url(font/speculum.tff);
}
.header {
    background:#c1d4ff;
    margin:15px auto;
    text-align:center;
    height:300px;
    width:relative;
}
.selection {
    margin:10px auto;
    position:relative;
    height:relative;
    width:relative;
    min-width: 800px;
}
.footer {
    margin:25px auto;
    text-align:center;
    height:150px;
    width: 80%;
    background: #c1d4ff;
    min-width: 400px;
}
.itemlink {
    top:75px;
    position:relative;
    right:228px;
    float:left;
}
.itemlink:before {
    content:"Link: "
}
.itemprice {
    top:95px;
    position:relative;
    right:340px;
    float:left;
}
.itemprice:before {
    content:"Price: "
}
.iteminfo {
    top:15px;
    position:relative;
    right:20%;
    float:right;
}
.iteminfo:before {
    content:"Additional Info:";
    text-decoration:underline;
}
.itemcode {
    top:55px;
    position:relative;
    right:147px;
    float:left;
}
.itemcode:before {
    content:"Item Code: "
}
.itemname {
    top:35px;
    position:relative;
    left:42px;
    float:left;
}
.itemname:before {
    content:"Name: "
}
#parts img {
    border: 3px double #c1d4ff;
    margin-top:20px;
    float:left;
    height:100px;
    width:100px;
}
#parts {
    height:150px;
    margin:0 auto;
    width:80%;
    background:#ffffff;
}
#parts ul {
    list-style: none;
}
#parts ul li {
}
#parts ul li ul {
}
#parts ul li ul li {
}
#main img {
    margin-top:20px;
    float:left;
    height:100px;
    width:100px;
}
#main {
    padding-bottom:10px;
    height:relative;
    margin:0 auto;
    width:80%;
    background:#ffffff;
}
#main ul {
    list-style: none;
}
#main .para {
    color:#5358e5;
    letter-spacing: -4px;
    font-family:speculum;
    text-align:justify;
    padding-top:10px;
    margin-right:100px;
    position:relative;
    left:20px;
}
#main .mainhead {
    color:#007e32;
    text-align:left;
    font-family:speculum;
    text-decoration:underline;
    font-weight:bold;
    font-size: 30px;
}
#sidebar {
    border: 1px dashed #ffffff;
    z-index:100;
    position:fixed;
    width:100%;
    text-align:center;
    background:#3366FF
}
#sidebar ul {
    text-align: center;
    display: inline;
    margin: 0;
    padding: 14px 4px 17px 0px;
    list-style: none;
}
#sidebar ul li {
    color:#FFFFFF;
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #3366FF;
    cursor: pointer;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
#sidebar ul li:hover {
    background: #4775FF;
    color: #FFFFFF;
}
#sidebar ul li.active {
    color:#FFFFFF;
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #5983FF;
    cursor: pointer;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
#sidebar ul li.active:hover {
    background: #4775FF;
    color: #FFFFFF;
}
#sidebar ul li ul {
    background: #3366FF;
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0px;
    width: 150px;
    padding-right: 4px;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
#sidebar ul li ul li {
    background: #3366FF;
    display: block;
    color: #FFFFFF;
}
#sidebar ul li ul li:hover {
    background: #4775FF;
    color: #FFFFFF;
}
#sidebar ul li ul li.active {
    background: #5983FF;
    display: block;
    color: #FFFFFF;
}
#sidebar ul li ul li.active:hover {
    background: #4775FF;
    color: #FFFFFF;
}
#sidebar ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
#slider {
    z-index:1;
    float:none;
    margin:0 auto;
    position:relative;
    width:720px;
    height:400px;
    overflow:hidden;
}
#slider img {
    height:400px;
    width:720px;
}
#slider .slides {
    display:block;
    height:400px;
    width:6000px;
    margin:0;
    padding:0;
}
#slider .slide {
    float:left;
    list-style-type:none;
    width:720px;
    height:400px;
}
#slidebttn {
    z-index:2;
    transform:translateY(-400px);
    width:800px;
    position:relative;
    margin:0 auto;
    float:none;
    height:400px;
}
#slidebttn .left {
    position:relative;
    margin:0 auto;
    float:left;
    height:400px;
    width:40px;
}
#slidebttn .right {
    background: transparent;
    cursor:pointer;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
    text-shadow: 4px 4px 5px #000000;
    font-weight: bold;
    line-height: 400px;
    text-align: center;
    position:relative;
    margin:0 auto;
    float:right;
    height:400px;
    width:40px;
}
#slidebttn .right:hover {
    text-shadow: 1px 1px 5px #000000;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75);
}
#slidebttn .right:active {
    text-shadow: 2px 2px 5px #000000;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body style="background-image:url(http://westquesttech.com/images/background.jpg)">
    <div id="sidebar">
        <ul>
            <li class="active"><span>Home</span>

            </li>
            <li onclick="location.href='philosophy.html';"><span>Philosophy</span>

            </li>
            <li><span>Shop</span>

                <ul>
                    <li onclick="location.href='shop.html';">Computers</li>
                    <li onclick="location.href='shop2.html';">Accessories</li>
                    <li onclick="location.href='shop3.html';">Parts</li>
                </ul>
            </li>
            <li onclick="location.href='contact.html';"><span>Contact</span>

            </li>
        </ul>
    </div>
    </br>
    </br>
    <div class="header">
        <img src="http://westquesttech.com/images/westquestlogo.png">
    </div>
    <div style="height:450px;" class="selection">
        <div id="slider">
            <ul class="slides" style='margin-left:-720px'>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image5.jpg" />
                </li>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image1.jpg" />
                </li>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image2.jpg" />
                </li>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image3.jpg" />
                </li>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image4.jpg" />
                </li>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image5.jpg" />
                </li>
                <li class="slide">
                    <img src="http://westquesttech.com/images/image1.jpg" />
                </li>
            </ul>
        </div>
        <div id="slidebttn">
            <button class="left">
                <</button>
                    <button class="right">></button>
        </div>
    </div>
    <div class="footer"></div>
    
    </html>

＆＃13;

＆＃13;

＆＃13;