纯JS写的一个轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

Hallin_Me

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量9.7k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Hallin_Me/article/details/51201045

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近学习了一下JavaScript，按照其他代码的思路，我写了一个JS的轮播图。代码如下：

<!doctype html>
<html>
	<head>
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding:0px;
			margin: 0px;
		}
		#box{
			width: 490px;
			height: 170px;
			overflow: hidden;
			position: relative;
			background-color: orange;
		}
		#box #mylist{
			position: absolute;
			width: 2450px;
			left: 0px;
			top: 0px;
			list-style-type: none;
		}
		#box ul li{
			float: left;
		}
		ul#underNum{
			position: absolute;
			right: 10px;
			bottom: 10px;
			background-color: yellow;
			width: 150px;
			height: 30px;
			list-style-type: none;
		}
		ul#underNum li{
			text-align: center;
			width: 30px;
			height: 30px;
			line-height: 30px;
			
		}
		ul#underNum li a{
			text-decoration: none;
		}
	</style>
	<body>
		<div id="box">
			<ul id="mylist">
				<li><a><img src="./img/01.jpg"></a></li>
				<li><a><img src="./img/02.jpg"></a></li>
				<li><a><img src="./img/03.jpg"></a></li>
				<li><a><img src="./img/04.png"></a></li>
				<li><a><img src="./img/05.jpg"></a></li>
			</ul>
			<ul id="underNum">
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">5</a></li>
			</ul>
		</div>
		<script type="text/javascript">
			var timer=setInterval("hello()",2000);
			var mylist=document.getElementById("mylist");
			var num=document.getElementById("mylist").getElementsByTagName("li");
			var now=0;
			var left=0;
			function hello(){
				// body...
				// document.write("ddd"+now);
				if (left<=-(num.length-1)*490) {
					now=0;
					left=-now*490;
					mylist.style.left=left+"px";
					now=now+1;
				}else{
					left=-now*490;
					mylist.style.left=left+"px";
					now=now+1;
				};
				
			}
			//移动的位置
			function toCover(now1){
				now=now1;
				left=-now*490;
				mylist.style.left=left+"px";
				clearInterval(timer);
				
			}
			var numli=document.getElementById("underNum").getElementsByTagName("li");
			for (var i = 0; i <=numli.length - 1; i++) {
				numli[i].index=i;
				numli[i].οnmοuseοver=function(){
					//alert(this.index);
					toCover(this.index);	
				};
				numli[i].οnmοuseοut=function(){
					//alert(this.index);
					timer=setInterval("hello()",1000);
				};
			};
		</script>
	</body>
</html>

本文由“你正哥来了”学习过程中笔记整理，纯属个人笔记资料，如有错误，请指教，望相互学习(CCDirector ---你正哥来了)

Hallin_Me

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯JS写的一个轮播图

最近学习了一下JavaScript，按照其他代码的思路，我写了一个JS的轮播图。代码如下： *{ padding:0px; margin: 0px; } #box{ width: 490px; height: 170px; overflow: hidden; position: relative; background-
复制链接

扫一扫

专栏目录