jQuery div与无限幻灯片放映（不停，喜欢StarWars）

时间：2016-02-19 16:05:23

标签： javascript jquery jquery-animate

我尝试在div中的文本中进行无限和自动滚动（对于starwars通用方式）。 当前代码有效，但结果根本不流畅。

我不明白为什么，我希望这是流动的。

这是我的代码：

$(function(){
    setInterval(function(){
        $(".slideshow ul").animate({marginTop:-20}, 500, function(){
            $(this).css({marginTop:0}).find("li:last").after($(this).find("li:first"));
        })
    }, 500);
});


$(document).ready(function(){

	$(function(){
      	setInterval(function(){
         	$(".slideshow ul").animate({marginTop:-20}, 500, function(){
            	$(this).css({marginTop:0}).find("li:last").after($(this).find("li:first"));
        	})
      	}, 500);
   	});

    
    });
body { 
  background: url(img/1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.head {
	width: 100%;
	height: 150px;
	text-align: center;
	background-color: rgba(255,255,255, 0.2);
}

.users {
	margin-top: 20px;
	padding-top: 20px; 
	height: 400px;

	text-align: center;
	background-color: rgba(255,255,255, 0.2);

}

#suscrib {
	height: 45px;
	font-size: 15px !important;
}


.slideshow {

   width: 200px;
   height: 370px;
   overflow: hidden;
   /*border: 3px solid #F2F2F2;*/
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 100%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
}
.slideshow li {
   color: red;
   font-family: 'Satisfy';

   font-size: 15px;
}


.thanks {
	margin-top: 20px;
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 40px;
	color: red;
}

#ombre {
	box-shadow: 3px 3px 43px #000 !important;
}

h1 {
	padding-top: 80px;
	opacity: 1 !important;
	z-index: 10;
}

#logo {
	height: 150px;
	width: 150px;
	margin-top: 0px;
}
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>


		
	<body>
  


			<div class="row">
    			<div class="users col-lg-2 col-lg-offset-5" id="ombre">
    				<div class="slideshow col-lg-12 ">
	    				<ul id="pushme">
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user2  </div>  </li>
              <li> <div id='suscrib'> User user3  </div>  </li>
                          <li> <div id='suscrib'> User user4  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
                          <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
                          <li> <div id='suscrib'> User user10  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
	    				</ul>
	    			</div>

    			</div>
			</div>
		</div>
	</body>
</html>

编辑：检查新代码段 非常感谢！

1 个答案:

答案 0 :(得分：1)

所以，这里有些不对劲。

  1. 动画生涩的原因＃1是因为你没有指定缓动，所以jQuery使用默认的“swing”设置。你想要的是“线性的”，因为你根本不想放松，你希望它像星球大战文本一样以稳定的速度连续向上滚动。
  2. 动画生涩的原因＃2是因为你动画了20px，而你的“suscrib”元素是45px高。因此，您只是将其设置为中途，然后将其跳回到0。
  3. 您有多个ID为“suscrib”的DIV。在文档中永远不应该有一个具有给定id的唯一元素，而是使用类。

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

	$(function(){
      	setInterval(function(){
         	$(".slideshow ul").animate({marginTop:-45}, 2000, "linear", function(){
            	$(this).css({marginTop:0}).find("li:last").after($(this).find("li:first"));
        	})
      	}, 2000);
   	});

    
    });
    body { 
  background: url(img/1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.head {
	width: 100%;
	height: 150px;
	text-align: center;
	background-color: rgba(255,255,255, 0.2);
}

.users {
	margin-top: 20px;
	padding-top: 20px; 
	height: 400px;

	text-align: center;
	background-color: rgba(255,255,255, 0.2);

}

.suscrib {
	height: 45px;
	font-size: 15px !important;
}


.slideshow {

   width: 200px;
   height: 370px;
   overflow: hidden;
   /*border: 3px solid #F2F2F2;*/
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 100%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
}
.slideshow li {
   color: red;
   font-family: 'Satisfy';

   font-size: 15px;
}


.thanks {
	margin-top: 20px;
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 40px;
	color: red;
}

#ombre {
	box-shadow: 3px 3px 43px #000 !important;
}

h1 {
	padding-top: 80px;
	opacity: 1 !important;
	z-index: 10;
}

#logo {
	height: 150px;
	width: 150px;
	margin-top: 0px;
}
    <html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>


		
	<body>
  


			<div class="row">
    			<div class="users col-lg-2 col-lg-offset-5" id="ombre">
    				<div class="slideshow col-lg-12 ">
	    				<ul id="pushme">
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user2  </div>  </li>
              <li> <div class='suscrib'> User user3  </div>  </li>
              <li> <div class='suscrib'> User user4  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user10  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
	    				</ul>
	    			</div>

    			</div>
			</div>
		</div>
	</body>
</html>

相关问题
最新问题