- Просмотров - 359
- Комментариев - 0
- Рейтинг - из 5 ()
Описание:
Всем доброе время суток.
И так сегодня к вашему вниманию представить хочу - "jQuery Slider v0.7"
И так что от вас требуется а собственно не чего сложного.
И так давайте приступим к самой установке
И так скачиваем "АРХИВ" распаковываем и видим там такие "ПАПКИ"
css >>> images >>> js
Загружаем их в свой "Файловый менеджер"
После заходим на нужную страницу сайта и между тегами -
ставим
И там где хотим видеть данный - "jQuery Slider v0.7" ставим между
ставим
Собственно данные ссылки "http://www.site.ru/" меняем на свои ( или своих партнеров )
Если вы желаете добавить количество картинок в данной разработке делаем следующие
Вот собственно и все, нет не чего сложного вовсе!
Желаю успехов....
Спасибо за ваше внимание с уважением - Златьев Дмитрий
По всем вопросом обращайтесь в ЛЧ
Всем доброе время суток.
И так сегодня к вашему вниманию представить хочу - "jQuery Slider v0.7"
И так что от вас требуется а собственно не чего сложного.
И так давайте приступим к самой установке
И так скачиваем "АРХИВ" распаковываем и видим там такие "ПАПКИ"
css >>> images >>> js
Загружаем их в свой "Файловый менеджер"
После заходим на нужную страницу сайта и между тегами -
Код
<head> и </head>
ставим
Код
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/slider.css" media="screen">
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/sky-blue.css" media="screen">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->
<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivoslider.pack.js"></script>
<script type="text/javascript">
// Nivo Slider Опции
$(document).ready(function(){
$("#slider").nivoSlider({
effect: 'random', //Укажите наборы, как: «fold, fade, sliceDown"
slices: 20,
pauseTime: 5000,
directionNavHide: false,
pauseOnHover: true, //Остановить анимацию при наведении указателя
manualAdvance: false, //Силы ручной переходы
captionOpacity: 0.8 //Универсальная подпись непрозрачность
});
});
</script>
<link rel="stylesheet" type="text/css" href="css/slider.css" media="screen">
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/sky-blue.css" media="screen">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->
<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivoslider.pack.js"></script>
<script type="text/javascript">
// Nivo Slider Опции
$(document).ready(function(){
$("#slider").nivoSlider({
effect: 'random', //Укажите наборы, как: «fold, fade, sliceDown"
slices: 20,
pauseTime: 5000,
directionNavHide: false,
pauseOnHover: true, //Остановить анимацию при наведении указателя
manualAdvance: false, //Силы ручной переходы
captionOpacity: 0.8 //Универсальная подпись непрозрачность
});
});
</script>
И там где хотим видеть данный - "jQuery Slider v0.7" ставим между
Код
<body> и </body>
ставим
Код
<!-- BY LEKUS 2012 -->
<div id="wrapper">
<div id="header_container">
<div id="header">
<div id="slider_container">
<div id="slider">
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide1.jpg" width="940" height="350" alt="">
</a>
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide2.jpg" width="940" height="350" alt="">
</a>
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide5.jpg" width="940" height="350" alt="">
</a>
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide4.jpg" width="940" height="350" alt="">
</a>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="header_container">
<div id="header">
<div id="slider_container">
<div id="slider">
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide1.jpg" width="940" height="350" alt="">
</a>
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide2.jpg" width="940" height="350" alt="">
</a>
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide5.jpg" width="940" height="350" alt="">
</a>
<a href="http://www.ufacer.ru/" target="_blank">
<img src="images/slider/slide4.jpg" width="940" height="350" alt="">
</a>
</div>
</div>
</div>
</div>
Собственно данные ссылки "http://www.site.ru/" меняем на свои ( или своих партнеров )
Если вы желаете добавить количество картинок в данной разработке делаем следующие
Код
<a href="http://www.ваша ссылка.ru/" target="_blank">
<img src="images/slider/путь картинки.jpg" width="940" height="350" alt="">
</a>
<img src="images/slider/путь картинки.jpg" width="940" height="350" alt="">
</a>
Вот собственно и все, нет не чего сложного вовсе!
Желаю успехов....
Спасибо за ваше внимание с уважением - Златьев Дмитрий
По всем вопросом обращайтесь в ЛЧ
- LeKcUs
- Профиль автора
Авторизируйтесь на сайте, чтобы иметь возможность скачивать архивы с сайта.
Источник: не указан
