Главная » 2012 » Июнь » 25 » Красивый и функциональный слайд шоу на jQuery (Javascript)
25.06.2012, 22:37

Красивый и функциональный слайд шоу на jQuery



Всем доброе время суток!

И так сегодня я вам хочу предоставить - "Красивый и функциональный слайд шоу на jQuery"




И так, давайте приступим к установке.

Установка!

И так что бы поменять картинки вы скачиваете архив и в файле js/lekus2012.js добавляете путь
на картинку (сам скрипт в файле js/lekus2012.js выглядит так)

Код
Code
{src: 'images/slide-3.jpg', title: 'Обратная связь!', link: {  
  href: 'http://www.ufacer.ru/index/razrabotchiki/0-27?out=1',  
  text: 'Читать больше про Ранго'  
  }}

даный код вы вставляете в етойже папке
соответствено меняете путь ссылки название и таму подобное!

Вот пример скрипта в папке полный...

Код
Code
$(window).ready(function() {  
  $.jSimpleSlide('#j-simple-slide', [  
  {src: 'images/slide-1.jpg', title: 'Cоциальная сеть uFacer.', link: {  
  href: 'http://www.ufacer.ru/',  
  text: 'Перейти на официальный сайт'  
  }},  
  {src: 'images/slide-2.jpg', title: 'Step Up 4', link: {  
  href: 'http://youtu.be/qkjzUWl22mE',  
  text: 'Смотреть трейлер'  
  }},  
  {src: 'images/slide-3.jpg', title: 'Обратная связь!', link: {  
  href: 'http://www.ufacer.ru/index/razrabotchiki/0-27?out=1',  
  text: 'Читать больше про Ранго'  
  }}  
  ]);  
  });

а вот пример скрипта если вы добавите еще один путь

Код
Code
$(window).ready(function() {  
  $.jSimpleSlide('#j-simple-slide', [  
  {src: 'images/slide-1.jpg', title: 'Cоциальная сеть uFacer.', link: {  
  href: 'http://www.ufacer.ru/',  
  text: 'Перейти на официальный сайт'  
  }},  
  {src: 'images/slide-2.jpg', title: 'Step Up 4', link: {  
  href: 'http://youtu.be/qkjzUWl22mE',  
  text: 'Смотреть трейлер'  
  }},  
  {src: 'images/slide-3.jpg', title: 'Обратная связь!', link: {  
  href: 'http://www.ufacer.ru/index/razrabotchiki/0-27?out=1',  
  text: 'Читать больше про Ранго'  
  }},  
  {src: 'images/slide-4.jpg', title: 'Обратная связь!', link: {  
  href: 'http://www.ufacer.ru/index/razrabotchiki/0-27?out=1',  
  text: 'Читать больше про Ранго'  
  }}  
  ]);  
  });

ну соответствно сколько вам нужно выводов сколько иставим...

дальше заходим на ту страницу сайта которая вам нужна и между тегами <head> и </head> вставляем:

Код
Code
<link type="text/css" rel="stylesheet" href="css/base.css" />  
  <link type="text/css" rel="stylesheet" href="css/js-slide.css" />  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
  <script type="text/javascript" src="js/js-slide.js"></script>  
  <script type="text/javascript" src="js/lekus2012.js"></script>


И так после чего вам нужно вставить сам код что бы выводил слайдер между <body> и </body> ставим:
Code
<div id="j-simple-slide">  
  <div class="j-simple-slide-header">js-slide</div>  
  <div class="j-simple-slide-image"></div>  
  <a class="j-simple-slide-link" href="#"></a>  
  </div>
Материал взят с сайта infoscript.ru
Теги: Скачать Красивый и функциональный слайд шоу на jQuery
Скачать "Красивый и функциональный слайд шоу на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: www.ufacer.ru
Категория: JavaScript's | Просмотров: 2071 | Добавил: Voker | Рейтинг: 5.0/1 |
Теги: функциональный, шоу, красивый, На, слайд, jQuery
Всего комментариев: 1
0  
1 Voker -Infoscript Team-  (25.06.2012 22:40) [Материал]
Аватар пользователя
Снова проблема с загрузкой скриншота.
Вот скриншот:
http://s019.radikal.ru/i644/1206/b0/938c105d0807.jpg

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]