ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный слайдер сайта на JS и CSS

Стильный слайдер сайта на JS и CSS

Стильный слайдер сайта на JS и CSS
Очередной стильный по дизайн слайдер, который создан на JS и CSS стилях. Который будет переключать элементы изображение по любой теме. Он работает как в автоматическом режиме, где показывает тематическую картинку и при клике на ее вы переходите на основной материал, который был как раз представлен на изображение.

Также есть ручной режим переключателя, который находится в нижнем левом углу, где сам пользователь может промотать и посмотреть материал, так как он его и представляет. Больше всего он подойдет на игровой ресурс. Но также вы можете поставить его и вывести самый актуальный материал, чтоб как можно пользователей и гостей его заметили и переходили.

Установка:

Для начало скачать архив и там будет папка 'images' и ее закидываем файловый менеджер.

Копируем код и ставим его на место, где вы посчитали нужным.

Код
<link rel="stylesheet" href="/images/nivo-slider.css" type="text/css" media="screen" />  
<script type="text/javascript" src="/images/jquery-1.4.3.min.js"></script>  
<script type="text/javascript" src="/images/jquery.nivo.slider.js"></script>  
<script type="text/javascript">  
  $(window).load(function() {  
  $('#slider').nivoSlider();  
  });  
</script>  
<div id="wrapper">  
  <div id="slider-wrapper">  
  <div id="slider" class="nivoSlider">  
  <img src="http://zornet.ru/Aben/Gsa/zornet/banner1.jpg" alt="" />  
  <img src="/images/banner2.jpg" alt="" />  
  <img src="/images/banner3.jpg" alt="" />  
  <img src="http://zornet.ru/Aben/Gsa/zornet/banner3.jpg" alt="" />  
  </div>  
  </div>  
</div>


Эти стили прописать в CSS:

Код
#slider {  
  position:relative;  
  width:640px;  
  height:200px;  
  margin-top:6px;  
  margin-left:5px;  
  margin-bottom:10px;  
  background:url('/images/load_blue2.gif') no-repeat 50% 50%;  
}  
#slider img {  
  position:absolute;  
  top:0px;  
  left:0px;  
  display:none;  
}  
#slider a {  
  border:0;  
  display:block;  
}  

.nivo-controlNav {  
  position:absolute;  
  left:20px;  
  bottom:10px;  
}  
.nivo-controlNav a {  
  display:block;  
  width:22px;  
  height:22px;  
  background:url('/images/bullets.png') no-repeat;  
  text-indent:-9999px;  
  border:0;  
  margin-right:3px;  
  float:left;  
}  
.nivo-controlNav a.active {  
  background-position:0 -22px;  
}  

.nivo-directionNav a {  
  display:block;  
  width:30px;  
  height:30px;  
  background:url('/images/arrows.png') no-repeat;  
  text-indent:-9999px;  
  border:0;  
}  
a.nivo-nextNav {  
  background-position:-30px 0;  
  right:15px;  
}  
a.nivo-prevNav {  
  left:15px;  
}  

.nivo-caption {  
  text-shadow:none;  
  font-family: Helvetica, Arial, sans-serif;  
}  
.nivo-caption a {  
  color:#efe9d1;  
  text-decoration:underline;  
}


PS - здесь идет изначально изображение, которое можно также держать ФМ или просто ссылкой установить в код, что показано наглядным примером. Также рекомендую ставить по формату, это ширина и длинна, чтоб все корректно показывало.

Источник: www.csomsk.ru
23 Декабря 2016 Загрузок: 14 Просмотров: 2489 Комментариев: (4)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 4
Kolinkor
Kolinkor 23 Декабря 2016 21:531
0
Один из многих, который по своей установке простой и смотрится не хуже других.
Kosten
Kosten 23 Декабря 2016 23:174
0
Да они все ставятся почти одинаково, только можно ссылки сразу прописать а не закидывать в корень сайта.
ZruBkul
ZruBkul 23 Декабря 2016 22:002
0
Можно на кино сайт поставить, но больше файлов в код написать, и также самые просматривающие или новые фильмы выводить.
Kosten
Kosten 23 Декабря 2016 22:083
0
Сейчас если судит по кино сайту, то прессуют его вообще, даже заливать фильмы не стал, так как приходят одни жалобы от правообладателей, но согласен, что подойдет.

Но видать он был сделан для игровой тематике, но фильмы тема далеко от этой темы не отошла.
Войдите:
avatar