Question

我试图进行搜索，但无法弄明白。

Jquery代码似乎有问题，我在第一张图片上卡住了，滑块没有移动到任何地方。

这是完整的代码，没有外部文件，它都在一个html.index页面上。

这不适用于Chrome，Firefox和IE。

它应该是5张图片Carousel幻灯片。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>carousselo</title>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
<script type="text/javascrpt">

$(document).ready(function() {
                  setInterval(function() {
                  $('#caroussel  ul').animate({marginLeft:'-800px'},2000,function(){

  $(this).find("li:last").after($(this).find("li:first"));
  $(this).css({marginLeft:0});
});

},4000);                 

 });

Answer 1

将javascript代码更改为：

$(document).ready(function() {
    var $ul = $('#caroussel  ul');
    setInterval(function() {
      $ul.animate({marginLeft:'-800px'},2000,function(){
        $ul.find("li:last").after($(this).find("li:first"));
        $ul.css({marginLeft:0});
      });
    },4000);                 

 });

编辑：这是完整的工作脚本

carousselo

<style type="text/css"> 
        *{ margin: 0; padding: ; } 
        body { background: #661A4C; } 
        #main { margin: 50px auto; padding: 20px; box-shadow: 0 0 28px #000; width: 800px; height: 500px; } 
        #caroussel { width: 750px; height: 500px; overflow:hidden; } 
        #caroussel ul { list-style: none; width: 3750px; height: 500px; } 
        #caroussel ul li { float: left; width: 750px; height: 500px; } 
        #caroussel ul img { width: 750px; height: 500px; } 
</style>

<body> 
    <div id="main"> 
        <div id="caroussel"> 
            <ul> 
                <li><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /><li> 
                <li><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /><li> 
                <li><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /><li> 
                <li><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /><li> 
                <li><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /><li> 
            </ul> 
        </div> 
    </div> 
</body>

<script type="text/javascript">

$(document).ready(function() {
    var $ul = $('#caroussel  ul');
    setInterval(function() {
      $ul.animate({marginLeft:'-800px'},2000,function(){
        $ul.find("li:last").after($(this).find("li:first"));
        $ul.css({marginLeft:0});
      });
    },2000);                 

 }); 

</script>

JSBIN

为什么这个html / css / jquery Carousel幻灯片无效？

1 个答案: