非常简单的滑块动画少于三张幻灯片

打破我在这里有一个非常基本的滑块，我得到了来自：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

非常简单的滑块动画少于三张幻灯片

回答

相关问题