轮播图（点击小点点让他跳转到具体某一张）

最新推荐文章于 2023-05-25 11:31:11 发布

雕琢时光纸戆

最新推荐文章于 2023-05-25 11:31:11 发布

阅读量1.6k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102744800

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

轮播图的原理前几篇说过一些现在加上一些点点击让他轮播在这里插入图片描述
具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。
下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			
			.item{
				height: 200px;
				width: 200px;
				font-size: 20px;
				text-align: center;
				/* margin: auto auto; */
				display: none;
				transition: all .3s;
				position: relative;
				
			}
			.item.show{
				display:block ;
			}
			.item:nth-child(1){
				background-color: red;
			}
			.item:nth-child(2){
				background-color: rosybrown;
			}
			.item:nth-child(3){
				background-color: royalblue;
			}
			.item:nth-child(4){
				background-color:aquamarine ;
			}
			.item:nth-child(5){
				background-color:indigo ;
			}
			.point-wrap{
				display: flex;
				position: absolute;
				top: 0px;
				left: 10px;
				z-index: 200;
				
				
			}
			.point{
				height: 30px;
				width: 30px;
				background-color: darkorange;
				border-radius: 10px;
				
				margin-right: 10px;
				font-size: 12px;
				line-height: 30px;
				text-align: center;
				
				
			}
		</style>
	</head>
	<body>
		
		<ul class="item-wrap">
			<li class="item show">0</li>
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
			
			
		</ul>
		<ul class="point-wrap">
			<li class="point" data-index="0"></li>
			<li class="point" data-index="1"></li>
			<li class="point" data-index="2"></li>
			<li class="point" data-index="3"></li>
			<li class="point" data-index="4"></li>
			
		</ul>
		<script type="text/javascript">
			var item = document.getElementsByClassName('item')
			
			var index = 0
			var clear = function(){
				for(i=0;i<item.length;i++){
					item[i].className = 'item'
				}
			}
			var goNext  = function(){
				if(index==item.length-1){
					index=0
				}else{
					index++
				}
				clear()
				item[index].className = 'item show'
			}
			var goPro = function(){
				if(index==0){
					index = 4
				}else{
					index --
				}
				clear()
				item[index].className = 'item show'
			}
			var points = document.getElementsByClassName('point')
			var pointWrap = document.getElementsByClassName('point-wrap')
			for(i=0;i<points.length;i++){
				points[i].addEventListener('click',function(e){
				 index = this.getAttribute('data-index')
				 clear()
				 item[index].className = 'item show'
				})
			}
//			var show = Element.attributes
		</script>
	</body>
</html>

雕琢时光纸戆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图（点击小点点让他跳转到具体某一张）

轮播图的原理前几篇说过一些现在加上一些点点击让他轮播具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
复制链接

扫一扫

专栏目录