前端学习随缘记录

最新推荐文章于 2024-07-19 12:58:53 发布

我只是个小测试

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量135

点赞数

分类专栏：前端学习文章标签： js 前端 html

本文链接：https://blog.csdn.net/qq_41992088/article/details/85232241

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片播放练习</title>
	<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
				var left=0;
				var dec=2;
				// $('#content').html($('#content').html()+$('#content').html());
				$('#left').click(function(){
					 dec=2;
				});
				$('#right').click(function(){
					 dec=-2;
				});

				//这里千万不能带单位 30  ms 带了就运行不了！！！
				var timer = setInterval(move,30);

				function move(){
					//这里千万不能带单位 px 带了就运行不了！！！！
					if(left<-800){
						left=0;
					}
					if(left>0){
						left=-800;
					}
					else{left-=dec;}
				
					$('#content').css({left:left});
				}

				$('#content').mouseover(function(){
					clearInterval(timer);
				});

				$('#content').mouseout(function(){
					timer = setInterval(move,30);
					// setInterval(move,30);
					// 如果用上面这句话，暂停继续暂停继续 会越来越快~~~~！！！！
				});
		
		})
		
	</script>

	<style type="text/css">
		.slide{
			width:802px;
			height:202px;
			border: 1px solid black;
			margin-top:50px;
			margin-left: 0;
			background: #ddd;
			position: relative;
			overflow: hidden;

		}

		.content{
			width: 1600px;
			list-style: none;
			padding-left: 0;
			margin-top: 0;
			position: absolute;
			left:0;

		}

		.content li{
			float:left;
			height:180px;
			width: 190px;
			margin-right: 5px;
			margin-left: 5px;
			margin-top: 10px;


		}

		.content li img{
			height:180px;
			width: 190px;
		}

	</style>



</head>
<body>
	<input type="button" name="" value="<<" id='left' class='left'>
	<input type="button" name="" value=">>" id='right' class='right'>


	<div class="slide" id="slide">
		<ul class="content" id="content">
			<li><img src="../images/banner01.jpg"></li>
			<li><img src="../images/banner02.jpg"></li>
			<li><img src="../images/banner03.jpg"></li>
			<li><img src="../images/banner04.jpg"></li>
			<li><img src="../images/banner05.jpg"></li>
			<li><img src="../images/banner06.jpg"></li>
			<li><img src="../images/goods_pic.jpg"></li>
			<li><img src="../images/adv01.jpg"></li>
		</ul>
	</div>
	
</body>
</html>

在这里插入图片描述

我只是个小测试

关注

0
点赞
踩
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;script type="text/javascript" src="jquery
复制链接

扫一扫