Главная » Файлы » Прочие скрипты » jQuery |
Очередной простой автоматический слайдер изображений через плагин FadeSlideShow на jQuery для uCoz
24.06.14, 16:56:48 | |
Очередной достаточно оригинальный слайдер изображений. Легко настраивается, а установка так вообще элементарная Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Установка: В самый низ вашего css: Код /* Theme Name: Simple FadeSlideShow Theme URI: http://www.simplefadeslideshow.com Description: "simplefadeslideshow.com Website" Version: 1.0 Author: Pascal Bajorat Author URI: http://www.pascal-bajorat.com */ /**********************************************************/ #slideshowWrapper{position:relative;width:500px;margin-left:50px;} #fssPrev{position:absolute;top:169px;left:-67px;background:url(/images/arrows.png) -67px 0px;width:67px;height:143px;text-indent:-999999px;} #fssNext{position:absolute;top:169px;left:646px;background:url(/images/arrows.png) no-repeat;width:67px;height:143px;text-indent:-999999px;} #fssPlayPause{position:absolute;top:435px;right:-130px;background:url(/images/white.png) repeat;padding:4px 0 5px 0;-moz-border-radius:5px;border-radius:5px;width:60px;text-align:center;display:block;color:#333;text-decoration:none;} ul#slideshow{list-style:none;border:1px solid #999;padding:2px;margin:auto;margin-top:5%;width:500px;height:480px;overflow:hidden;} #fssList{list-style:none;width:646px;margin:auto;margin-left:80px;padding:5px 0 0 45%;} #fssList li{display:inline;padding-right:10px;} #fssList li a{color:#999;text-decoration:none;} #fssList li.fssActive a{font-weight:bold;color:#333;} Следующий код после < /head >: Код <script type="text/javascript" src="/js/fadeSlideShow.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slideshow').fadeSlideShow(); }); </script> В то место, где будет слайдер, вставляйте: Код <div id="slideshowWrapper"> <ul id="slideshow"> <li> <img src="Ссылка на картинку" width="500" height="480" border="0" alt="" /> </li> <!-- This is the last image in the slideshow --> <li> <img src="Ссылка на картинку" width="500" height="480" border="0" alt="" /> </li> <li> <img src="Ссылка на картинку" width="500" height="480" border="0" alt="" /> </li> <li> <img src="Ссылка на картинку" width="500" height="480" border="0" alt="" /> </li> <!-- This is the first image in the slideshow --> </ul> <br clear="all" /> </div> Скрипт из прикреплённого архива залейте в папку js, все картинки в папку images Материал подготовлен Apocalypse | |
Просмотров: 614 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |