HTML_JS_CSS/slider_css3.html at master · gaterking/HTML_JS_CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>

<html>
<head>
  <meta charset="utf-8">
  <title>HTML5/CSS3 Slider</title>
  <style type="text/css">
  	.slider{height: 480px; width: 600px; position: relative;}
  	.sliderBox>input[type=radio]{
  		position: absolute;
  		top:24px;
  		left:50%;
  		width: 16px;
  		margin: 2px;
  		z-index: 0;
  	}
  	.sliderBox>label{
  		height:16px;
  		width:16px;
  		background: #cccccc;
  		cursor: pointer;
  		z-index:10;
  		position: absolute;
  		left:50%;
  		top:24px;
  		-webkit-border-radius:50%;
  		-moz-border-radius:50%;
  		border-radius: 50%;  	}
  	#sliderIndex_0{margin-left: -38px;}
  	#sliderIndex_1{margin-left: -18px;}
  	#sliderIndex_2{margin-left: 2px;}
  	#sliderIndex_3{margin-left: 22px;}
  	.sliderBox>label[for=sliderIndex_0]{margin-left: -38px;}
  	.sliderBox>label[for=sliderIndex_1]{margin-left: -18px;}
  	.sliderBox>label[for=sliderIndex_2]{margin-left: 2px;}
  	.sliderBox>label[for=sliderIndex_3]{margin-left: 22px;}
  	#sliderIndex_0:checked~.imgBox{left:0;opacity:0.8;}
  	#sliderIndex_1:checked~.imgBox{left:-100%;}
  	#sliderIndex_2:checked~.imgBox{left:-200%;opacity:0.8;}
  	#sliderIndex_3:checked~.imgBox{left:-300%;}
  	.sliderBox{
  		height: 100%;
  		width: 100%;
  		overflow: hidden;
  		position: relative;
  	}
  	.imgBox{
  		width: 400%;
  		position: absolute;
  		transition:2s ease;
  	}
  	.imgBox img{
  		height: 480px;
  		width:600px;
  		float: left;
  	}
  </style>
</head>
<body>
<div class="slider">
	<div class="sliderBox">

		<input type="radio" name="sliderIndex" id="sliderIndex_0" checked />
		<label for="sliderIndex_0"></label>
		<input type="radio" name="sliderIndex" id="sliderIndex_1"/>
		<label for="sliderIndex_1"></label>
		<input type="radio" name="sliderIndex" id="sliderIndex_2"/>
		<label for="sliderIndex_2"></label>
		<input type="radio" name="sliderIndex" id="sliderIndex_3"/>
		<label for="sliderIndex_3"></label>

		<div class="imgBox">
			<img src="imgs/1.jpg" alt="1"/>
			<img src="imgs/2.jpg" alt="2"/>
			<img src="imgs/3.jpg" alt="3"/>
			<img src="imgs/4.jpg" alt="4"/>
		</div>
	</div>
</div>
<body>
</body>
</html>