бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Плавная смена блоков с эффектом затухания (смена блоков без перезагрузки страницы с эффектом затухания)
Плавная смена блоков с эффектом затухания
webanet Дата: Понедельник, 2012-11-26, 02:02 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Рассмотрим пример установки плавной смены блоков с эффектом затухания без перезагрузки страницы. Блоки будут меняться в определенный промежуток времени, при смене они будут затухать или плавно проявляться

Содержимое блоков может быть самым разным, но на мой взгляд удобнее всего так откручивать несколько информеров на одном месте с поочередным показом каждого

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

Содержимое скрипта


Код
(function ($) {
var hwSlideSpeed = 3000;
var hwTimeOut = 9000;
var hwNeedLinks = false;

$(document).ready(function(e) {
         $('.slide').css(
          {"position" : "static",
           "top":'0', "left": '0'};).hide().eq(0).show();
         var slideNum = 0;
         var slideTime;
         slideCount = $("#slider .slide").size();
         var animSlide = function(arrow){
          clearTimeout(slideTime);
          $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
          if(arrow == "next"){
           if(slideNum == (slideCount-1)){slideNum=0;}
           else{slideNum++}
           }
          else if(arrow == "prew")
          {
           if(slideNum == 0){slideNum=slideCount-1;}
           else{slideNum-=1}
          }
          else{
           slideNum = arrow;
           }
          $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
          $(".control-slide.active").removeClass("active");
          $('.control-slide').eq(slideNum).addClass('active');
          }
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#"><</a><a id="nextbutton" href="#">></a>')
         .prependTo('#slider');          
         $('#nextbutton').click(function(){
          animSlide("next");
          return false;
          };)
         $('#prewbutton').click(function(){
          animSlide("prew");
          return false;
          };)
}
         var $adderSpan = '';
         $('.slide').each(function(index) {
           $adderSpan += '<span class = "control-slide">' + index + '</span>';
          };);
         $(".control-slide:first").addClass("active");
         $('.control-slide').click(function(){
         var goToNum = parseFloat($(this).text());
         animSlide(goToNum);
         };);
         var pause = false;
         var rotator = function(){
           if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
           }
         $('#slider-wrap').hover(         
          function(){clearTimeout(slideTime); pause = true;},
          function(){pause = false; rotator();
          };);
         rotator();
};);
};)jQuery);


Где вы можете изменить скорость автоматической смены блоков, изменив значение var hwTimeOut = 9000; выделенное красным - числовое значение скорости. Чем оно больше - тем медленнее скорость смены
Если вам нужно вписать сменяющиеся блоки в правую или левую колонку сайта, то значение

Код
{"position" : "static",
           "top":'0', "left": '0'}


Стили


Код
#slider-wrap{
         width:210px;
         }

.slide{         
         width:100%;
         height:100%;
         }


Где
Код
#slider-wrap{
         width:210px;
         }
Это ширина блока, которая должна совпадать с шириной ваших блоков на сайте. Если например дать ширину более, чем ширина блока, то колонка где установлен блок будет шире остальных

Код
.slide{         
         width:100%;
         height:100%;
         }


Это ширина и высота сменяющихся блоков. Лучше поставить по 100%

Установка на сайт


Код
<div id="slider-wrap">
<div id="slider">
         <div class="slide">тут располагаем первый блок с содержимым</div>
<div class="slide">тут располагаем второй блок с содержимым</div>
<div class="slide">тут располагаем третий блок с содержимым</div>
         </div></div>


Вместо блоков с содержимым можно прописать картинки, любые тексты и все что угодно

Смотрим что получилось. Живой пример плавно сменяющихся блоков с информерами



Полное подключение


Код
<script src="http://webanetlabs.net/rottewr.js" type="text/javascript"></script>
скрипт подключаем в любое место до закрывающего тега body
(или берем содержимое скрипта и заливаем на сайт, подключаем с заменой адреса подгрузки скрипта со своего сайта)

Код
#slider-wrap{
         width:210px;
         }

.slide{         
         width:100%;
         height:100%;
         }
В любое место таблицы стилей CSS

Код
<div id="slider-wrap">
<div id="slider">
         <div class="slide">тут располагаем первый блок с содержимым</div>
<div class="slide">тут располагаем второй блок с содержимым</div>
<div class="slide">тут располагаем третий блок с содержимым</div>
         </div></div>
В любое место, где нужно поставить сменяющиеся блоки
 
webanet Дата: Понедельник, 2012-11-26, 02:12 | Сообщение # 2
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Данный метод годится и для откручивания любого сменного контента в блоке. Для этого берем любой блок и в контент прописываем

Code
<!-- <block9> -->
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr><td align="center" style="background: url('/.s/t/281/7.gif') #DCDDDE; height: 29px; color: #3984D8;"><b><!-- <bt> --><!--<s3163>-->Случайная информация<!--</s>--><!-- </bt> --></b></td></tr>
<tr><td style="background: url('/.s/t/281/8.gif') center bottom no-repeat #FFFFFF;border: 1px solid #DCDADA;padding:5px 5px 10px 5px;"><div align="center"><!-- <bc> --><div id="slider-wrap">
<div id="slider">
         <div class="slide">первый вариант контента</div>
<div class="slide">второй вариант контента</div>
<div class="slide">третий вариант контента</div>
         </div></div><!-- </bc> --></div></td></tr>
</table>

<!-- </block9> -->


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

Примечание: Нельзя ставить несколько таких слайдеров на странице
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Плавная смена блоков с эффектом затухания (смена блоков без перезагрузки страницы с эффектом затухания)
  • Страница 1 из 1
  • 1
Поиск: