Главная » 2012 Март 16 » Скрипты uCoz: Стильный слайдер контента через плагин slideJS
18:21 Скрипты uCoz: Стильный слайдер контента через плагин slideJS | ||||||||||||
Стильный слайдер контента через плагин slideJSСоветуем посмотреть: src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> ДЕМО МАТЕРИАЛА Установка: После /head на нужных страницах вставляйте: Code <script src="/js/slides.min.jquery.js"></script> <script> $(function(){ // Set starting slide to 1 var startSlide = 1; // Get slide number if it exists if (window.location.hash) { startSlide = window.location.hash.replace('#',''); } // Initialize Slides $('#slides').slides({ preload: true, preloadImage: '/images/loading.gif', generatePagination: true, play: 5000, pause: 2500, hoverPause: true, // Get the starting slide start: startSlide, animationComplete: function(current){ // Set the slide number as a hash window.location.hash = '#' + current; } }); }); </script> <link rel="stylesheet" href="/css/global.css"> Следующий код в то место, где будет сам слайдер: Code <center> <div id="example"> <div id="slides"> <div class="slides_container"> <div class="slide"> <h1>Первый слайд</h1> Текст первого слайда <a href="#4" class="link">Перейти в слайд 2</a> </div> <div class="slide"> <h1>Второй слайд</h1> Текст второго слайда <a href="#1" class="link">Перейти в первый слайд</a> </div> </div> <a href="#" class="prev"><img src="/images/arrow-prev.png" width="24" height="43"></a> <a href="#" class="next"><img src="/images/arrow-next.png" width="24" height="43"></a> </div> <img src="/images/example-frame.png" width="739" height="341" id="frame"> </div> </center> Осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images Материал взят с сайта infoscript.ru Теги: Скачать Стильный слайдер контента через плагин slideJS
|