新闻无缝循环的实现(jquery)

效果

新闻无缝循环的实现(jquery)_第1张图片

所用到的jquery文件点下面链接

https://gitee.com/lzh_gitee/web/tree/master/%E7%BD%91%E9%A1%B5/%E6%96%B0%E9%97%BB%E6%97%A0%E7%BC%9D%E5%BE%AA%E7%8E%AF

代码一


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			*{
      
				padding: 0;
				margin: 0;
			}
			#hd{
      
				width: 500px;
				height: 40px;
				margin: 200px auto;
				border: 2px solid orange;
				position: relative;
				overflow: hidden;
			}
			#hd ul{
      
				position: absolute;
				top: 0;
				left: 0;
			}
			#hd ul li{
      
				width: 500px;
				height: 40px;
				list-style: none;
				line-height: 40px;
				text-align: center;
			}
		style>
		<script src='jquery-3.4.1.js'>script>
		<script>
			$(function(){
      
				//大总管变量
				var c=0;
				//设置定时器让ul每个一秒钟滑动一次
				setInterval(function(){
      
					c++;
					if(c==5){
      
						//让ul做一个瞬时变化
						$("#hd ul").css({
      'top':'0px'});
						c=1;
					}
					var t=c*-40;
					$("#hd ul").animate({
      'top':t+'px'},500)
					
				},1000)
			})
		script>
	head>
	<body>
		<div id="hd">
			<ul>
				<li style='background: green;'>新华社:认清美方倒打一耙的把戏li>
				<li style='background: red;'>《新闻联播》告诉你:中国经济的底气从何而来li>
				<li style='background: orange;'> 最高检依法分别对缪瑞林、邢云、钱引安决定逮捕li>
				<li style='background: blue;'>亚洲文明对话大会来了,这份详细指南请注意查收li>
				<li style='background: green;'>新华社:认清美方倒打一耙的把戏li>
			ul>
		div>
	body>
html>

代码二


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			*{
      
				padding: 0;
				margin: 0;
			}
			#hd{
      
				width: 500px;
				height: 40px;
				margin: 200px auto;
				border: 1px solid orange;
				position: relative;
				overflow: hidden;
			}
			#hd ul{
      
				position: absolute;
				bottom: -40px;
				left: 0;
			}
			#hd ul li{
      
				width: 500px;
				height: 40px;
				list-style: none;
				line-height: 40px;
				text-align: center;
			}
		style>
		<script src='jquery-3.4.1.js'>script>
		<script src='jquery.easing.1.3.js'>script>
		<script>
			$(function(){
      
				setInterval(function(){
      
					//让第一个li高度变成0
					//$("#hd ul li").first().css('height':'0');
					//$("#hd ul li").first().height(0);
					//将第一个li追加到ul的最后
					//$("#hd ul").append($("#hd ul li").first());
					//让最后一个li的高度逐渐变为40px
					//$("#hd ul li").last().animate({'height':'40px'},500);
					$("#hd ul").append($("#hd ul li").first().height(0).animate({
      'height':'40px'},500));
				},1000)
			})
		script>
	head>
	<body>
		<div id="hd">
			<ul>
				<li style='background: green;'>新华社:认清美方倒打一耙的把戏li>
				<li style='background: red;'>《新闻联播》告诉你:中国经济的底气从何而来li>
				<li style='background: orange;'> 最高检依法分别对缪瑞林、邢云、钱引安决定逮捕li>
				<li style='background: blue;'>亚洲文明对话大会来了,这份详细指南请注意查收li>
				
			ul>
		div>
	body>
html>

你可能感兴趣的:(#,jquery,#,HTML,前端学习,jquery)