无缝滚动前端渲染

最新推荐文章于 2024-07-06 00:08:38 发布

**星光*

最新推荐文章于 2024-07-06 00:08:38 发布

阅读量252

点赞数 1

分类专栏：前端文章标签： w ^无缝滚动

本文链接：https://blog.csdn.net/weixin_42322206/article/details/84779793

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style type="text/css">
		body,ul{
			margin:0;
			padding:0;
		}

		.list_con{
			
			width:1000px;
			height:200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color:#f0f0f0;
			position:relative;
			overflow:hidden;
		}

		.list_con ul{
			list-style:none;
			width:2000px;
			height:200px;
			position:absolute;
			left:0;
			top:0;
		}


		.list_con li{
			width:180px;
			height:180px;
			float:left;
			margin:10px;
		}

		.btns_con{
			width:1000px;
			height:30px;
			margin:50px auto 0;
			position:relative;
		}

		.left,.right{
			width:30px;
			height:30px;
			background-color:gold;
			position:absolute;
			left:-40px;
			top:124px;
			font-size:30px;
			line-height:30px;
			color:#000;
			font-family: 'Arial';
			text-align:center;
			cursor:pointer;
			border-radius:15px;
			opacity:0.5;
		}
		.right{
			left:1010px;			
			top:124px;			
		}
	</style>
	
	<script type="text/javascript"  src="jquery-1.12.4.min.js">	</script>
	<script type="text/javascript">
		
		
		
		$(function(){
			var num =0
			var run=null
			
			fn()

			$('#slide').hover(function(){
				clearInterval(run)
				
			},function(){
				fn()
			})
			
			
			function fn(){
				
				
				run = setInterval(function(){
//					万能输入
					if (num<= '-' + $('#list').css('width').split('px').join('')/2){
//					if (num<= '-' + $('#list').css('width').substring(0,4)/2){
//					if (num<=-1000){
						num=0
					}
					num-=10
					$('#list').css({'left':num +'px'})
				},80)
				
			}
			
			
			
			
		})
				
				
				
	</script>
				
				

</head>
<body>
	<div class="list_con" id="slide">
		<ul id="list">
		<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
		
		
		
		</ul>

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

**星光*

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
无缝滚动前端渲染

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无缝滚动&lt;/title&gt; &lt;style type="text/css"&gt; body,ul{ mar
复制链接

扫一扫