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
83
84
85
86
87
88
89
90
91 | <style>
.slider{width:960px;position:relative;padding-top:630px;margin:0px;box-shadow:rgba (0,0,30,0.95);}
.slider>img{position: absolute;left: 0; top: 0;transition: all 0.5s;}
.slider input[name='slide_switch'] {display: none;}
.slider label {margin:0;float: left;cursor: pointer;transition: all 0.5s;}
.slider label img{display: block;}
.slider input[name='slide_switch']:checked+label {opacity: 1;}
.slider input[name='slide_switch'] ~ img {opacity:0;transform: scale(1.1);}
.slider input[name='slide_switch']:checked+label+img {opacity: 1;transform: scale(1);}
</style>
<div class="slider">
<input type="radio" name="slide_switch" id="id1" checked="checked"/><label for="id1">
<img src="http://i.imgur.com/fiVofHI.jpg" width="96"/></label>
<img src="http://i.imgur.com/fiVofHI.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id2"/><label for="id2">
<img src="http://i.imgur.com/rcivwQJ.jpg" width="96"/></label>
<img src="http://i.imgur.com/rcivwQJ.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id3"/><label for="id3">
<img src="http://i.imgur.com/0nyxX2L.jpg" width="96"/></label>
<img src="http://i.imgur.com/0nyxX2L.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id4"/><label for="id4">
<img src="http://i.imgur.com/gptb8xn.jpg" width="96"/></label>
<img src="http://i.imgur.com/gptb8xn.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id5"/><label for="id5">
<img src="http://i.imgur.com/oSC4D7R.jpg" width="96"/></label>
<img src="http://i.imgur.com/oSC4D7R.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id6"/><label for="id6">
<img src="http://i.imgur.com/9GqSG9a.jpg" width="96"/></label>
<img src="http://i.imgur.com/9GqSG9a.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id7"/><label for="id7">
<img src="http://i.imgur.com/7X4wjWS.jpg" width="96"/></label>
<img src="http://i.imgur.com/7X4wjWS.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id8"/><label for="id8">
<img src="http://i.imgur.com/kbCkBYe.jpg" width="96"/></label>
<img src="http://i.imgur.com/kbCkBYe.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id9"/><label for="id9">
<img src="http://i.imgur.com/XZLp5MA.jpg" width="96"/></label>
<img src="http://i.imgur.com/XZLp5MA.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id10"/><label for="id10">
<img src="http://i.imgur.com/uFoNudk.jpg" width="96"/></label>
<img src="http://i.imgur.com/uFoNudk.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id11"/><label for="id11">
<img src="http://i.imgur.com/DgCJJQe.jpg" width="96"/></label>
<img src="http://i.imgur.com/DgCJJQe.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id12"/><label for="id12">
<img src="http://i.imgur.com/1Yul3Hv.jpg" width="96"/></label>
<img src="http://i.imgur.com/1Yul3Hv.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id13"/><label for="id13">
<img src="http://i.imgur.com/Nq06hwX.jpg" width="96"/></label>
<img src="http://i.imgur.com/Nq06hwX.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id14"/><label for="id14">
<img src="http://i.imgur.com/0pOnQXw.jpg" width="96"/></label>
<img src="http://i.imgur.com/0pOnQXw.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id15"/><label for="id15">
<img src="http://i.imgur.com/W8LjNt5.jpg" width="96"/></label>
<img src="http://i.imgur.com/W8LjNt5.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id16"/><label for="id16">
<img src="http://i.imgur.com/zamfiLB.jpg" width="96"/></label>
<img src="http://i.imgur.com/zamfiLB.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id17"/><label for="id17">
<img src="http://i.imgur.com/YezgGht.jpg" width="96"/></label>
<img src="http://i.imgur.com/YezgGht.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id18"/><label for="id18">
<img src="http://i.imgur.com/l9hrZQQ.jpg" width="96"/></label>
<img src="http://i.imgur.com/l9hrZQQ.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id19"/><label for="id19">
<img src="http://i.imgur.com/UMQ2IrD.jpg" width="96"/></label>
<img src="http://i.imgur.com/UMQ2IrD.jpg" width="960"/>
<input type="radio" name="slide_switch" id="id20"/><label for="id20">
<img src="http://i.imgur.com/1l2cZBC.jpg" width="96"/></label>
<img src="http://i.imgur.com/1l2cZBC.jpg" width="960"/></div>
|
