运动与游戏开发12------banner图案例

最新推荐文章于 2024-08-09 21:30:00 发布

捞比丶

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量112

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41915936/article/details/107446662

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

banner图

完美框架实现banner图缓冲效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{margin: 0px; padding: 0px}
			#ul1 li{list-style: none; width: 200px; height: 200px; float: left; margin: 10px}
			#ul1 li img{width: 100%; height: 100%}
			#ul1{position: absolute; left: 0px}
			#div1{width: 880px; height: 220px; border: 1px solid black; margin: 100px auto; position: relative; overflow: hidden;}
		</style>
		<script src = '../startMove.js'></script>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var oUl = document.getElementById("ul1");
				var aLis = oUl.getElementsByTagName("li");

				//将oul中所有的li标签重新插入一份
				oUl.innerHTML += oUl.innerHTML;
				//重新计算oul的宽
				oUl.style.width = aLis.length * 220 + 'px';
			

				//每隔两秒钟切换一张图片
				setInterval(function(){
					startMove(oUl, {left: oUl.offsetLeft - 220}, function(){
						if(oUl.offsetLeft <= -oUl.offsetWidth / 2){
							oUl.style.left = 0;
						}
					})
				}, 2000);

			}
		</script>
	</head>
	<body>
		<div id = 'div1'>
			<ul id = 'ul1'>
				<li>
					<img src="img/1.jpg" alt="">
				</li>
				<li>
					<img src="img/2.jpg" alt="">
				</li>
				<li>
					<img src="img/3.jpg" alt="">
				</li>
				<li>
					<img src="img/4.jpg" alt="">
				</li>
			</ul>
		</div>
	</body>
</html>

正常JS实现banner图效果在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{margin: 0px; padding: 0px}
			#ul1 li{list-style: none; width: 200px; height: 200px; float: left; margin: 10px}
			#ul1 li img{width: 100%; height: 100%}
			#ul1{position: absolute; left: 0px}
			#div1{width: 880px; height: 220px; border: 1px solid black; margin: 100px auto; position: relative; overflow: hidden;}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var oUl = document.getElementById("ul1");
				var aLis = oUl.getElementsByTagName("li");

				//将oul中所有的li标签重新插入一份
				oUl.innerHTML += oUl.innerHTML;
				//重新计算oul的宽
				oUl.style.width = aLis.length * 220 + 'px';
			

				setInterval(function(){
					oUl.style.left  = oUl.offsetLeft - 5 + 'px';

					if(oUl.offsetLeft <= -oUl.offsetWidth / 2){

						//重新开始向左走
						oUl.style.left = 0;
					}
				}, 30);

			}
		</script>
	</head>
	<body>
		<div id = 'div1'>
			<ul id = 'ul1'>
				<li>
					<img src="img/1.jpg" alt="">
				</li>
				<li>
					<img src="img/2.jpg" alt="">
				</li>
				<li>
					<img src="img/3.jpg" alt="">
				</li>
				<li>
					<img src="img/4.jpg" alt="">
				</li>
			</ul>
		</div>
	</body>
</html>

捞比丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动与游戏开发12------banner图案例

banner图完美框架实现banner图缓冲效果<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px; padding: 0px} #ul1 li{list-style: none; width: 200px; height: 20
复制链接

扫一扫

专栏目录