轮播图纯代码原理

在这里插入图片描述
核心就是很简单的两个方法。
加上事件和样式就完成了轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		
		<script type="text/javascript">
			var i =0;
			var goNext =function(){
				if(i==5){
					i=0
				}else{
					i++
				}
				
					console.log(i)
			}
		
			var goPro  = function(){
				if(i==0){
					i=5
				}else{
					i--
				}
				console.log(i)
			}
			
		</script>
	</body>
</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是HTML和CSS实现的轮播图代码: HTML代码: ``` <div class="slideshow-container"> <input type="radio" name="slide" id="slide1" checked> <input type="radio" name="slide" id="slide2"> <input type="radio" name="slide" id="slide3"> <div class="slideshow"> <div class="slide"> <img src="img1.jpg"> </div> <div class="slide"> <img src="img2.jpg"> </div> <div class="slide"> <img src="img3.jpg"> </div> </div> <div class="nav"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> </div> ``` CSS代码: ``` .slideshow-container { max-width: 800px; position: relative; margin: auto; } .slideshow { display: flex; overflow: hidden; } .slide { flex: 1; width: 100%; transition: all 1s ease; } .slide img { width: 100%; } .nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .nav label { cursor: pointer; display: block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; } .nav label:hover { background-color: #555; } input[type="radio"] { display: none; } input[type="radio"]:checked + .slideshow .slide { width: 0; } input[type="radio"]:checked + .slideshow .slide:nth-of-type(1) { width: 100%; } input[type="radio"]:checked + .slideshow .slide:nth-of-type(2) { width: 100%; } input[type="radio"]:checked + .slideshow .slide:nth-of-type(3) { width: 100%; } input[type="radio"]:checked + .nav label { background-color: #555; } ``` 这个轮播图的实现方式是通过使用radio和label元素来实现的。HTML代码中的input元素用于定义轮播图的切换按钮,label元素用于定义按钮的样式。CSS代码中的.nav类用于定义按钮容器的样式,其中transform属性被设置为translateX(-50%)以实现水平居中。radio元素的:checked伪类被用于控制轮播图的显示,其中:nth-of-type()伪类用于控制每个轮播图的显示方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值