Слайдер изображений «Serie3» с красивыми подсказками на jQuery
|
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 |
#slider { width: 410px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #slider1, #slider2 { width: 720px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent, #slider1Content, #slider2Content { width: 720px; position: absolute; top: 0; margin-left: 0; } .sliderImage, .slider1Image, .slider2Image { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .slider1Image span, .slider2Image span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 694px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px; } .top { top: 0; left: 0; height: 110px; } .bottom { bottom: 0; left: 0; height: 110px; } .left { top: 0; left: 0; width: 110px !important; height: 280px; } .right { right: 0; bottom: 0; width: 110px !important; height: 290px; } |
2#: Следующий код вставьте после /head на всех нужных страницах:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="/js/s3Slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); $('#slider1').s3Slider({ timeOut: 4000 }); $('#slider2').s3Slider({ timeOut: 5000 }); }); </script> |
3#: Этот код поместите в то место, где должен быть сам слайдер:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <img src="Ссылка на картинку" /> <span class="top">Описание картинки</span> </li> <li class="sliderImage"> <img src="Ссылка на картинку" /> <span class="bottom">Описание картинки</span> </li> <div class="clear sliderImage"></div> </ul> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
