js轮播图

最新推荐文章于 2025-05-19 15:33:06 发布

原创最新推荐文章于 2025-05-19 15:33:06 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js效果图专栏收录该内容

10 篇文章

订阅专栏

轮播图

具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#warp{
				width: 600px;
				height: 500px;
				border:1px solid red ;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			.l{
				position: absolute;
				top:220px;
				left:0;
				width: 80px;
				height: 40px;
				border: 0;
				font-size: 30px;
			}
			.r{
				position: absolute;
				top:220px;
				right:0;
				width: 80px;
				height: 40px;
				border: 0;
				font-size: 30px;
			}
			ul{
				list-style: none;
				width: 100%;
				height: 40px;
				position: absolute;
				top:460px;
				/*background: yellow;*/
				z-index: 1;
			}
			li{
				width: 30px;
				height: 30px;
				border-radius:50% ;
				margin:0 40px;
				background: #ccc;
				float: left;
				position: relative;
			}
			li>img{
				position: absolute;
				top:-50px;
				width: 50px;
				height: 50px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="warp">
			<img src="images/0.jpg"/>
			<button class="l"><</button>
			<button class="r">></button>
			<ul>
				<li style="background: red;"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var obtn=document.getElementsByTagName('button');
		var oimg=document.getElementsByTagName('img')[0];
		var oli=document.getElementsByTagName('li');
		var imgArr=[0,1,2,3,4];
		var n=0;
		obtn[0].onclick=function(){
			n--;//-1
			if(n<0){
				n=imgArr.length-1;
				//n=4
			}
			img();
		}
		obtn[1].onclick=function(){
			n++;
			if(n>imgArr.length-1){
				n=0;
			}
			img();
		}
		
		function img(){
			//imgArr[n]这个整体可以看成就是 数组中的某个元素
			oimg.src='images/'+imgArr[n]+'.jpg';
			//去images文件下去找imgArr数组中对应到元素的图片赋值给img标签
			for(var i=0; i<oli.length; i++){
				oli[i].style.background='';
			}
			oli[n].style.background='red';
		}
		for(var j=0; j<oli.length; j++){
			oli[j].index=j;
			oli[j].onclick=function(){
				n=this.index;
				oimg.src='images/'+imgArr[n]+'.jpg';
				img()
			}
			oli[j].onmouseover=function(){
				this.innerHTML="<img src="+"images/"+imgArr[this.index]+".jpg>"
			}
			oli[j].onmouseout=function(){
				this.innerHTML='';
			}
		}
		
	</script>
</html>

效果图