Team:Korea U Seoul/template/contents slider
From 2013.igem.org
(Difference between revisions)
(10 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
<style> | <style> | ||
- | .slider{padding:5px 100px; width: | + | .slider{padding:5px 100px; width: 943px; height: 352px; position: relative;} |
- | .slider > img { width: | + | .slider > img { width: 943px; height: 352px;} |
.slider_navi{position: absolute; bottom: 30px; left: 110px;} | .slider_navi{position: absolute; bottom: 30px; left: 110px;} | ||
- | .slider_navi > span {background-color: # | + | .slider_navi > span {background-color: #242424; margin: 10px; cursor: pointer; padding: 5px 7px; color: #FFFFFF;} |
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | <div class="slider" style="border-radius:10px;"> | + | <div style="width:100%;"> |
- | <img src=" | + | <div class="slider" style="border-radius:10px; margin:0 auto;"> |
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/thumb/d/db/Sliders1.png/800px-Sliders1.png"> |
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/thumb/4/40/Sliders2.png/800px-Sliders2.png"> |
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/thumb/4/40/Sliders3.png/800px-Sliders3.png"> |
+ | <img src="https://static.igem.org/mediawiki/2013/thumb/1/13/Sliders4.png/800px-Sliders4.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/thumb/7/71/Sliders5.png/800px-Sliders5.png"> | ||
<div class="slider_navi"> | <div class="slider_navi"> | ||
</div> | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</body> | </body> | ||
<script> | <script> | ||
var slider = $(".slider"); | var slider = $(".slider"); | ||
- | slider.width( | + | slider.width(943); |
- | slider.height( | + | slider.height(352); |
var slider_navi = $(".slider_navi"); | var slider_navi = $(".slider_navi"); | ||
var imgs = slider.children("img"); | var imgs = slider.children("img"); | ||
Line 30: | Line 33: | ||
imgs.each(function(){ | imgs.each(function(){ | ||
$(this).hide(); | $(this).hide(); | ||
- | slider_navi.append("<span onclick=\"slide_img("+i+")\">"+(i+1)+"</span>"); | + | slider_navi.append("<span style='font-family: David; font-size: 14pt;' onclick=\"slide_img("+i+")\">"+(i+1)+"</span>"); |
i++; | i++; | ||
}) | }) |
Latest revision as of 23:34, 27 September 2013