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 | <style>
.slider {background: #115595;width: 960px;height: 724px;padding: 1px;position:relative; top: 0px;overflow: hidden;}
.images {background: #115595;width: 100%;height: 100%;transition: background .5s linear;}
input[type='radio'] {-webkit-appearance: none;appearance: none;background-color: #115595; background-size: 94px 59px;width: 94px;height: 59px; margin: 1px;cursor: pointer;position: relative;float: left;top: 601px;}
input[type='radio']:checked {content: ''; border: solid 1px #4EFF44; box-shadow: none; -webkit-filter: none;}
input[type='radio']:hover{border: solid 1px #4EFF44; -webkit-filter: none; transform: scale(1.05); z-index: 9999;}
.slide1 {background: url(http://i.imgur.com/fiVofHIt.jpg);}
.slide2 {background: url(http://i.imgur.com/gCr4ycDt.jpg);}
.slide3 {background: url(http://i.imgur.com/qrKer61t.jpg);}
.slide4 {background: url(http://i.imgur.com/Pq9Dexat.jpg);}
.slide5 {background: url(http://i.imgur.com/oSC4D7Rt.jpg);}
.slide6 {background: url(http://i.imgur.com/xHwALvDt.jpg);}
.slide7 {background: url(http://i.imgur.com/3Jk6C5nt.jpg);}
.slide8 {background: url(http://i.imgur.com/gptb8xnt.jpg);}
.slide9 {background: url(http://i.imgur.com/H2PNDWBt.jpg);}
.slide10 {background: url(http://i.imgur.com/2OIqV1bt.jpg);}
.slide11 {background: url(http://i.imgur.com/1l2cZBCt.jpg);}
.slide12 {background: url(http://i.imgur.com/qMMDdhYt.jpg);}
.slide13 {background: url(http://i.imgur.com/FURuBVWt.jpg);}
.slide14 {background: url(http://i.imgur.com/tZsqBn7t.jpg);}
.slide15 {background: url(http://i.imgur.com/n5IesXRt.jpg);}
.slide16 {background: url(http://i.imgur.com/7X4wjWSt.jpg);}
.slide17 {background: url(http://i.imgur.com/0M4jTZTt.jpg);}
.slide18 {background: url(http://i.imgur.com/C83SL17t.jpg);}
.slide19 {background: url(http://i.imgur.com/QWjXsdPt.jpg);}
.slide20 {background: url(http://i.imgur.com/15wHDCct.jpg);}
.slide1:checked ~ .images {background: url(http://i.imgur.com/fiVofHIh.jpg);}
.slide2:checked ~ .images {background: url(http://i.imgur.com/gCr4ycDh.jpg);}
.slide3:checked ~ .images {background: url(http://i.imgur.com/qrKer61h.jpg);}
.slide4:checked ~ .images {background: url(http://i.imgur.com/Pq9Dexah.jpg);}
.slide5:checked ~ .images {background: url(http://i.imgur.com/oSC4D7Rh.jpg);}
.slide6:checked ~ .images {background: url(http://i.imgur.com/xHwALvDh.jpg);}
.slide7:checked ~ .images {background: url(http://i.imgur.com/3Jk6C5nh.jpg);}
.slide8:checked ~ .images {background: url(http://i.imgur.com/gptb8xnh.jpg);}
.slide9:checked ~ .images {background: url(http://i.imgur.com/H2PNDWBh.jpg);}
.slide10:checked ~ .images {background: url(http://i.imgur.com/2OIqV1bh.jpg);}
.slide11:checked ~ .images {background: url(http://i.imgur.com/1l2cZBCh.jpg);}
.slide12:checked ~ .images {background: url(http://i.imgur.com/qMMDdhYh.jpg);}
.slide13:checked ~ .images {background: url(http://i.imgur.com/FURuBVWh.jpg);}
.slide14:checked ~ .images {background: url(http://i.imgur.com/tZsqBn7h.jpg);}
.slide15:checked ~ .images {background: url(http://i.imgur.com/n5IesXRh.jpg);}
.slide16:checked ~ .images {background: url(http://i.imgur.com/7X4wjWSh.jpg);}
.slide17:checked ~ .images {background: url(http://i.imgur.com/0M4jTZTh.jpg);}
.slide18:checked ~ .images {background: url(http://i.imgur.com/C83SL17h.jpg);}
.slide19:checked ~ .images {background: url(http://i.imgur.com/QWjXsdPh.jpg);}
.slide20:checked ~ .images {background: url(http://i.imgur.com/15wHDCch.jpg);}
</style>
<div class='slider'>
<input checked='' class='slide1' name='thumbnail' type='radio' />
<input class='slide2' name='thumbnail' type='radio' />
<input class='slide3' name='thumbnail' type='radio' />
<input class='slide4' name='thumbnail' type='radio' />
<input class='slide5' name='thumbnail' type='radio' />
<input class='slide6' name='thumbnail' type='radio' />
<input class='slide7' name='thumbnail' type='radio' />
<input class='slide8' name='thumbnail' type='radio' />
<input class='slide9' name='thumbnail' type='radio' />
<input class='slide10' name='thumbnail' type='radio' />
<input class='slide11' name='thumbnail' type='radio' />
<input class='slide12' name='thumbnail' type='radio' />
<input class='slide13' name='thumbnail' type='radio' />
<input class='slide14' name='thumbnail' type='radio' />
<input class='slide15' name='thumbnail' type='radio' />
<input class='slide16' name='thumbnail' type='radio' />
<input class='slide17' name='thumbnail' type='radio' />
<input class='slide18' name='thumbnail' type='radio' />
<input class='slide19' name='thumbnail' type='radio' />
<input class='slide20' name='thumbnail' type='radio' />
<div class='images'></div>
</div>
|
