[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Сменяющиеся изображения во весь экран
Страницы: 1, 2
Viper666
У меня есть готовый скрипт, могу выложить если надо?
qawsed1
Цитата (Viper666 @ 17.10.2012 - 21:31)
У меня есть готовый скрипт, могу выложить если надо?

Конечно надо))) За этим и пришёл сюда))) выложи будь добр.
Viper666

/*---------------------------------
Slideshow
-----------------------------------*/
// setup

$('ul.slideshow').wrap('<div class="slideshow-wrap"><div class="slideshow-inner"></div></div>')
.
each(function(){
var wrap = $(this).parents('.slideshow-wrap');
var inner = $(this).parents('.slideshow-inner');

// set height and width
var swidth = $(this).attr('width');
var sheight = $(this).attr('height');
if(swidth != undefined && sheight != undefined){wrap.width(swidth); inner.height(sheight);}
$(this).width('999em').attr('width','').attr('height','');

$(this).find('li:first').addClass('current');
$(this).delay(2000).animate({alpha:1}, function(){
KSslideshow($(this), null);
});

// add navigation buttons
var items = $(this).find('li');
wrap.append('<ul class="slideshow-buttons"></ul>');
items.each(function(index){
wrap.find('.slideshow-buttons')
.
append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+(index+1)+'</a></li>');
});

// stop play button
wrap.find('.slideshow-buttons')
.
append('<li class="slideshow-stop"><a href="#slideshow-stop">Stop</a></li>');
wrap.find('.slideshow-stop a').click(function(e){
e.preventDefault();
if(!wrap.hasClass('paused')) { next = wrap.find('.slideshow li.current');}
else{ next = null; }
var slideshow = $(this).parents('.slideshow-wrap').find('ul.slideshow');
KSslideshow(slideshow, next);
});

// button events
$('.slideshow-buttons li:first').addClass('current');
wrap.find('.slideshow-buttons li').not('.slideshow-stop').find('a').click(function(e){
e.preventDefault();
var slideshow = wrap.find('ul.slideshow');
var link = $(e.currentTarget).attr('rel');
var next = slideshow.find('li').eq(link);
KSslideshow(slideshow, next);
});
});

// run slideshow
function KSslideshow(slideshow, next){
var wrap = slideshow.parents('.slideshow-wrap');
var inner = slideshow.parents('.slideshow-inner');
var current = slideshow.find('li.current');
var nav = slideshow.parents('.slideshow-wrap').find('.slideshow-buttons li');
var sstop = nav.filter('.slideshow-stop');

// next slide
if(next == null) {
next = current.next();
if(next.length < 1) { next = slideshow.find('li:first'); }
wrap.removeClass('paused');
sstop.find('a').html('Stop');
}else{
wrap.addClass('paused');
sstop.find('a').html('Play');
}

// scroll
var scrollEffect = inner.scrollTo(next, 1000);
current.removeClass('current');
next.addClass('current');
nav.removeClass('current').eq(next.index()).addClass('current');
slideshow.delay(3000).animate({alpha:1}, function(){
if(wrap.hasClass('paused') == false){ KSslideshow(slideshow, null); }
}
);
}




.slideshow-wrap{
clear:both;
margin:0;
padding:0;
position:relative;
top:0;
left:0;
overflow:hidden;
clear:both;
}

.slideshow-inner{
overflow:hidden;
clear:both;
position:relative;
top:0;
left:0;

}

.slideshow{
clear:both;
margin:0;
padding:0;
width:auto;
height:auto;
overflow:hidden;
}

.slideshow li{
list-style-type:none;
margin:0;
padding:0;
float:left;
display:block;
}

.slideshow img{vertical-align: bottom;}

.slideshow-buttons{
text-align:right;
margin:-15px 0 0 0;
padding:0;
}

.slideshow-buttons li{display:inline;position:relative;top:-10;left:-10;line-height:0%;margin:0;padding:0;}
.slideshow-buttons li.current a{background:#ddd;}

.slideshow-buttons a{
display:inline;
position:relative;
top:0;
left:0;
padding:1px 3px;
margin:0 1px;
line-height:100%;
border:1px solid #efefef;
text-decoration:none;
font-size:0.8em;
}




<div style=" border-top: 1px solid #d4d4ef; padding: 3px; margin-right: -10px;">
<!-- Slideshow -->
<ul class="slideshow" width="563" height="110">
<li><img
src="../img/rek/1_sep.jpg" width="562px"></li>
<li><img
src="../img/rek/1_sep.jpg" width="562px"></li>
<li><img
src="../img/rek/1_sep.jpg" width="562px"></li>
<li><h3>
Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy <br>nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
</ul>
</div>

Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.