Плавная смена блоков с эффектом затухания
Рассмотрим пример установки плавной смены блоков с эффектом затухания без перезагрузки страницы. Блоки будут меняться в определенный промежуток времени, при смене они будут затухать или плавно проявляться
Содержимое блоков может быть самым разным, но на мой взгляд удобнее всего так откручивать несколько информеров на одном месте с поочередным показом каждого
За основу взят скрипт всем известного слайдера.
Код
(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://wmbonys.ru/ispitania/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>
В любое место, где нужно поставить сменяющиеся блоки