使用純CSS實現點選輪播圖效果，無js。

使用純CSS實現圖片輪播效果

首先我們來看一下所實現輪播圖的最終效果： 輪播圖效果

接下來為html+css程式碼部分：

以下為HTML程式碼部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>輪播圖</title>
		<link rel="stylesheet" href="css/banner.css">
	</head> 

	<body>
		<div class="banner">
			<input type="radio" id="put1" name="put" hidden>
			<input type="radio" id="put2" name="put" hidden>
			<input type="radio" id="put3" name="put" 
 hidden>
			<ul>
				<li><img src="img/first.png"></li>
				<li><img src="img/second.png"></li>
				<li><img src="img/third.png"></li>
			</ul>
			<div class="circle">
				<label for=" 
put1"></label>
				<label for="put2"></label>
				<label for="put3"></label>
			</div>
			<div class="left_arrow">
				<label for="put1"></label>
				<label for="put2"></label>
				<label for="put3"></label>
			</div>
			<div class="right_arrow">
				<label for="put1"></label>
				<label for="put2"></label>
				<label for="put3"></label>
			</div>
		</div>
	</body>
</html>

以下為CSS程式碼部分：

*{
	margin:0;
	padding:0;
}
.banner{
	position:relative;
	width:300px;
	height:300px;
	margin:50px auto;
	border:5px solid lightcoral;
	overflow:hidden;
}
.banner ul{
	width:900px;
	padding:0;
	transition:all 1s;
}
.banner li{
	list-style:none;
	width:300px;
	height:300px;
	float:left;
}
.circle{
	position:absolute;
	bottom:10px;
	left:92px;
}
.circle label{
	display:inline-block;
	width:20px;
	height:20px;
	border-radius:50%;
	background:lightcoral;
	margin:0 10px;
	position:relative;
	cursor:pointer;
}
.circle label::after{
	content:'';
	width:30px;
	height:30px;
	background:lightsalmon;
	border-radius:50%;
	position:absolute;
	top:-5px;
	left:-5px;
	opacity:0;
}
#put1:checked~.circle label:first-of-type::after,
#put2:checked~.circle label:nth-of-type(2)::after,
#put3:checked~.circle label:nth-of-type(3)::after{
	opacity:1;
}
#put1:checked~ul{
	margin-left:0;
}
#put2:checked~ul{
	margin-left:-300px;
}
#put3:checked~ul{
	margin-left:-600px;
}
.left_arrow label{
	display:inline-block;
	width:24px;
	height:44px;
	top:50%;
	left:0%;
	margin-top:-22px;
	position: absolute;
}
/* 圓點的put1,put2,put3和箭頭的put1,put2,put3是相互聯絡的，同時受input制約 */
#put1:checked~.left_arrow label:nth-of-type(3),
#put2:checked~.left_arrow label:nth-of-type(1),
#put3:checked~.left_arrow label:nth-of-type(2){
	margin-left:20px;
	cursor:pointer;
	background:url(../img/ban_prev.png) no-repeat center center;
}
.right_arrow label{
	display:inline-block;
	width:24px;
	height:44px;
	top:50%;
	right:0%;
	margin-top:-22px;
	position: absolute;
}
#put1:checked~.right_arrow label:nth-of-type(2),
#put2:checked~.right_arrow label:nth-of-type(3),
#put3:checked~.right_arrow label:nth-of-type(1){
	margin-right:20px;
	cursor:pointer;
	background:url(../img/ban_next.png) no-repeat center center;
}

以下為我所使用的圖片素材檔案，有需要可自取：
在這裡插入圖片描述

keep learning
轉載請註明來源

使用純CSS實現點選輪播圖效果，無js。

使用純CSS實現圖片輪播效果

使用純CSS實現點選輪播圖效果，無js。

原生js實現點選輪播切換圖片

JS+CSS實現3D切割輪播圖

js實現簡單的輪播圖效果

原生JS實現pc端輪播圖效果

基於javascript實現移動端輪播圖效果

JavaScript實現簡單的輪播圖效果

jQuery實現簡單的輪播圖效果

短視訊軟體開發，實現簡單的輪播圖效果

輪播圖效果，不再侷限於JS製作！

js實現輪播圖效果純js實現圖片自動切換

原生javascript+CSS實現輪播圖效果

純js實現輪播圖效果

HTML+CSS+Javascript實現輪播圖效果

JavaScript+css+HTML實現移動端輪播圖（含原始碼）

jQuery實現輪播圖效果demo

JS實現輪播圖效果

js實現輪播圖效果 z-index實現輪播圖

Swift實現3D輪播圖效果

js實現無縫輪播圖效果

使用純CSS實現點選輪播圖效果，無js。

使用純CSS實現圖片輪播效果

相關推薦