web前端js基础------制作滚动图片

搁浅小泽

已于 2024-07-14 21:06:28 修改

阅读量1.8k

点赞数 1

文章标签：前端 javascript 开发语言

于 2023-11-07 12:56:57 首次发布

本文链接：https://blog.csdn.net/m0_64148419/article/details/134264662

版权

1，要求

通过定时器使其出现滚动的效果

可以通过按键控制图片滚动的方向（设置两个按钮绑定点击事件）

当鼠标悬停时图片停止，鼠标离开时图片继续向前滚动（可以设置鼠标的悬停和离开事件）

参考如下

			content.onmouseenter = function(){//设置鼠标悬停事件
				key = "stop";
			}
			content.onmouseleave = function(){//设置鼠标离开事件
				key = "run";
			}

图片可以持续滚动，不会出现空白（添加滚动图片）

2，参考代码（左右滚动）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#slide{
				width:800px;
				height: 100px;
				margin: 0 auto;
				margin-top: 100px;
				border: 1px solid black;
				overflow: hidden;
			}
			#content{
				width: 999999px;
			}
			img{
				width: 160px;
				height: 100px;
				float: left;
				margin-right: 10px;
				cursor: pointer;
			}
			#button{
				width: 100px;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div id="slide">
			<div id="content">
				
				<img src="../img/1.png"/>
				<img src="../img/2.png"/>
				<img src="../img/3.png"/>
				<img src="../img/4.png"/>
				<img src="../img/5.png"/>
				<img src="../img/6.png"/>
				<img src="../img/7.png"/>
				<img src="../img/8.png"/>
				<img src="../img/9.png"/>
			</div>
		</div>
		<div id="button">
				<button type="button" id="left">向左</button>
				<button type="button" id="right">向右</button>
			</div>
		<script type="text/javascript">
			var content = document.getElementById("content");
			var left = document.getElementById("left");
			var right = document.getElementById("right");
			content.style.marginLeft = 0+"px";
			content.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;
			var key = "run";
			var dkey = "left";
			left.onclick = function(){
				dkey = "left";
			}
			right.onclick = function(){
				dkey = "right";
			}
			content.onmouseenter = function(){
				key = "stop";
			}
			content.onmouseleave = function(){
				key = "run";
			}
			dd();
			function dd(){
				var num = parseFloat(content.style.marginLeft);
				if(key == "run"){
					if(dkey == "left"){
						num-=0.5;
						if(num<=-170*9){
							num=0;
						}
					}else{
						num+=0.5;
						if(num>=0){
							num=-170*9;
						}
					}
				}
				content.style.marginLeft = num+"px";
				setTimeout("dd()",13);
			}
		</script>
	</body>
</html>

3，结果参考示例

4，参考代码（上下滚动）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 设置盒子 */
			#div{
				height: 800px;
				width: 100px;
				border: 1px solid black;
				margin: 0px auto;
				overflow: hidden;			
			}
			/* 设置内容即图片的容器*/
			#content{
				height: 999999px;
			}
			/* 设置图片的样式 */
			img{
				width: 100px;
				height: 160px;
				margin-top: 10px;
				cursor: pointer;
			}
			/* 设置按钮样式*/
			#button{ 
				width: 100px;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div id="content">
				<img src="../img/2ee18-231100-163232346010b0.jpg"/>
				<img src="../img/1.png"/>
				<img src="../img/2.png"/>
				<img src="../img/3.png"/>
				<img src="../img/4.png"/>
				<img src="../img/5.png"/>
				<img src="../img/6.png"/>
				<img src="../img/7.png"/>
				<img src="../img/8.png"/>
				<img src="../img/9.png"/>
			</div>
		</div>
		<div id="button">
				<button type="button" id="top">向上</button>
				<button type="button" id="buttom">向下</button>
		</div>
		<script>
			var content = document.getElementById("content");//获取内容的id
			var topSlide =document.getElementById("top");//获取向上按钮的id
			var downSlide =document.getElementById("buttom");//获取向下按钮的id
			content.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;//使内容乘于3倍
			content.style.marginTop = 0 + "px";//设置外边距初始值
			var key = "run";//设置初始是运行的
			var dkey = "top";//设置初始是向右边的
			topSlide.onclick = function(){
				dkey = "top";
			}
			downSlide.onclick = function(){
				dkey = "buttom";
			}
			content.onmouseenter = function(){//设置鼠标悬停事件
				key = "stop";
			}
			content.onmouseleave = function(){//设置鼠标离开事件
				key = "run";
			}
			
			slide();
			function slide(){
				var num = parseFloat(content.style.marginTop);
			if(key == "run"){
				if(dkey == "top"){
					num-=0.5;
					if(num<=-170*9){
						num=0;
					}
				}else{
					num+=0.5;
					if(num>=0){
						num=-170*9;
					}
				}
			}		
				content.style.marginTop = num+"px";
				setTimeout("slide()",13);//设置定时器使其运行
			}
		</script>
	</body>
</html>