非常簡單的滑塊動畫少於三張幻燈片

打破我在這裏有一個非常基本的滑塊，我得到了來自：http://codepen.io/Abbogaming1353/pen/CxgIE 非常簡單的滑塊動畫少於三張幻燈片

的問題是，少於三張幻燈片，動畫是搞砸了，我可以看到動畫中的背景而非下一張幻燈片順利地將第一張向左推。如果我只使用兩張幻燈片，即使在原始滑塊中也會發生這種情況。我會附上我編輯的代碼，所以你可以看到我有事情：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> 
<script src="index.js"></script></head> 

<style type="text/css"> 
#sliderBackground 
{ 
    width: 968px; 
    height: 370px; 
    margin: 0 auto; 
    padding: 0; 
    background: #0CC; 
} 

#slider 
{ 
    position: relative; 
    overflow: hidden; 
    width: 940px; 
    height: 340px; 
    margin: 5px auto 0; 
} 

#slider ul 
{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
    height: 200px; 
    list-style: none; 
} 

#slider ul li 
{ 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 940px; 
    height: 340px; 
    background: #ccc; 
    text-align: center; 
    line-height: 340px; 
} 

a.control_prev, a.control_next 
{ 
    position: absolute; 
    top: 40%; 
    z-index: 999; 
    display: block; 
    padding: 4% 3%; 
    width: auto; 
    height: auto; 
    background: #2a2a2a; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 18px; 
    opacity: 0.8; 
    cursor: pointer; 
} 
</style> 

<body> 

<div id="sliderBackground"> 
    <div id="slider"> 
     <ul> 
     <li>SLIDE 1</li> 
     <li>SLIDE 2</li> 
     </ul> 
    </div> 
</div> 

</body> 
</html>

的Javascript：

jQuery(document).ready(function ($) { 

    setInterval(function() { 
     moveRight(); 
    }, 3000); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

});

我認爲這個問題是與JavaScript，但我不知道從哪裏開始。

來源

2014-09-19 crazyflower432

替換該行

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

有了這個它會工作

$('#slider ul').css({ width: sliderUlWidth});

編輯2

替換該行

$('#slider').css({ width: slideWidth, height: slideHeight }); 
$('#slider ul').css({ width: sliderUlWidth}); 
$('#slider ul li:last-child').prependTo('#slider ul'); // this line to be changed

對此

$('#slider').css({ width: slideWidth, height: slideHeight }); 
$('#slider ul').css({ width: sliderUlWidth}); 
$('#slider ul li:first-child').prependTo('#slider ul'); // from :last-child to :first-child

來源

2014-09-19 17:21:36

這工作，除了現在幻燈片2顯示第一。不只是幻燈片2，但永遠幻燈片是最後一個。如果有4張幻燈片，它會進入幻燈片4，然後進入幻燈片1（這應該發生，我只是希望它從幻燈片1開始）。感謝您的幫助，瞭解幻燈片現在失靈的原因嗎？ – crazyflower432 2014-09-19 17:36:58

我已編輯我的答案 – 2014-09-21 08:15:58

謝謝，這很容易。 – crazyflower432 2014-09-22 13:14:37

Vitorino的解決方案可以爲Moveright工作，但如果向左移動，則會出現同樣的問題。我建議你打開檢查員並搜索「ul」，然後你會看到只有2個元素在你的ul中，你的ul總是在左側添加li。因此，您需要將.css放入每個按鈕的.click事件中。

 jQuery(document).ready(function ($) { 

    $('#checkbox').change(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 


    if(slideCount>2){ 
     $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth}); 
    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 
    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 
    }else 
    { 
     $('a.control_prev').hide(); 
     $('#slider ul').css({ width: sliderUlWidth}); 
    function moveLeft2() { 
     $('#slider ul').animate({ 
      left: 0 
     }, 200); 
     $('a.control_prev').hide(); 
     $('a.control_next').show(); 
    }; 

    function moveRight2() { 
     $('#slider ul').animate({ 
      left: -slideWidth 
     }, 200); 
     $('a.control_prev').show(); 
     $('a.control_next').hide(); 
    }; 
    $('a.control_prev').click(function() { 
     moveLeft2(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight2(); 
    }); 
    } 

});

這樣，當你點擊右鍵時，ul會處於正常位置（2. li將位於右側）。我希望你明白

來源

2014-09-19 17:51:34

請稍等。這仍然不能像它應該那樣工作。給我10分鐘 – 2014-09-19 17:56:03

沒有點擊左或右，我沒有設置控制自動播放和向左滑動。 – crazyflower432 2014-09-19 17:59:50

該代碼現已發佈，可與無控件一起使用。試一試 – 2014-09-19 18:17:37

非常簡單的滑塊動畫少於三張幻燈片

回答

相關問題