Слайдер изображений на CSS3 и jQuery
|
1 2 |
<script type="text/javascript" src="/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/style.css" /> |
2#: Следующий код в то место, где будет сам слайдер:
|
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 |
<div class="rm_wrapper"> <div id="rm_container" class="rm_container"> <ul> <li data-images="rm_container_1" data-rotation="-15"><img src="Ссылка на картинку"/></li> <li data-images="rm_container_2" data-rotation="-5"><img src="Ссылка на картинку"/></li> <li data-images="rm_container_3" data-rotation="5"><img src="Ссылка на картинку"/></li> <li data-images="rm_container_4" data-rotation="15"><img src="Ссылка на картинку"/></li> </ul> <div id="rm_mask_left" class="rm_mask_left"></div> <div id="rm_mask_right" class="rm_mask_right"></div> <div id="rm_corner_left" class="rm_corner_left"></div> <div id="rm_corner_right" class="rm_corner_right"></div> <h2>Fashion Explosion 2012</h2> <div style="display:none;"> <div id="rm_container_1"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> <div id="rm_container_2"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> <div id="rm_container_3"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> <div id="rm_container_4"> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> <img src="Ссылка на картинку"/> </div> </div> </div> <div class="rm_nav"> <a id="rm_next" href="#" class="rm_next"></a> <a id="rm_prev" href="#" class="rm_prev"></a> </div> <div class="rm_controls"> <a id="rm_play" href="#" class="rm_play">Play</a> <a id="rm_pause" href="#" class="rm_pause">Pause</a> </div> </div> |
3#: Следующий код сразу после предыдущего:
|
1 2 3 |
<script type="text/javascript" src="/js/jquery.transform-0.9.3.min_.js"></script> <script type="text/javascript" src="/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="/js/jquery.RotateImageMenu.js"></script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
