Главная » Файлы » Прочие скрипты » 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
Категория: jQuery | Добавил: Apocalypse | Теги: изображений, очередной, автоматический, Через, на, плагин, JQuery, FadeSlideShow, простой, слайдер
Просмотров: 614 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: