Witam
Napisałem skrypt rotatora banerów. Skrypt działa ładnie dopóki użytkownik nie najedzie na rotator, zamiarem było zatrzymanie po najechaniu myszki na przestrzeń rotatora i to działa, ale kiedy użytkownik wyjdzie po za rotator skrypt wariuje:
/**
* @author Piotr Byczkowski
*/
var instanceFlashSlider = false;
var maxFlashSlides = 4;
var currentSlide = 0;
var imageHeight = 0
var contentHeight = 0;
var timer = 0;
var delay = 1500;
$(document).ready(function() {
$('ul#flashbuttons span').css('opacity', '0');
$('ul#flashbuttons span').eq(0).css('opacity', '1');
imageHeight = $('ul#flashimages li img').eq(currentSlide).height();
contentHeight = $('ul#flashcontent').eq(currentSlide).height();
for(i = 0; i < maxFlashSlides; i++) {
if(i > 0) {
/* images */
$('ul#flashimages li img').eq(i).css('position', 'relative');
$('ul#flashimages li img').eq(i).css('top', ((-(imageHeight) * i - 13 * i) + 'px'));
$('ul#flashimages li img').eq(i).css('opacity', '0');
/* content */
$('ul#flashcontent li').eq(i).css('position', 'relative');
$('ul#flashcontent li').eq(i).css('top', ((-(contentHeight) * i) + 'px'));
$('ul#flashcontent li').eq(i).css('opacity', '0');
}
}
// Start script
flashRotator();
});
function flashRotator() {
$('#flash').hover(function() {
clearTimeout(timer);
},
function() {
flashRotator()
});
if(currentSlide < maxFlashSlides) {
if(currentSlide > 0) {
/* image */
$('ul#flashimages li img').eq(currentSlide).stop().animate({opacity: 1}, 'slow');
/* content */
$('ul#flashcontent li').eq(currentSlide - 1).stop().animate({opacity: 0}, 'slow');
$('ul#flashcontent li').eq(currentSlide).stop().animate({opacity: 1}, 'slow');
/* button */
$('ul#flashbuttons span').eq(currentSlide - 1).animate({opacity: 0}, 'slow');
$('ul#flashbuttons span').eq(currentSlide).animate({opacity: 1}, 'slow');
}
currentSlide++;
} else {
for(i = 1; i < maxFlashSlides; i++) {
if(i < (maxFlashSlides - 1)) {
/* image */
$('ul#flashimages li img').eq(i).css('opacity', '0');
/* content */
$('ul#flashcontent li').eq(i).css('opacity', '0');
/* button */
$('ul#flashbuttons span').eq(i).css('opacity', '0');
} else {
/* image */
$('ul#flashimages li img').eq(i).stop().animate({opacity: 0}, 'slow');
/* content */
$('ul#flashcontent li').eq(i).stop().animate({opacity: 0}, 'slow');
/* button */
$('ul#flashbuttons span').eq(i).animate({opacity: 0}, 'slow');
}
}
if(currentSlide == (maxFlashSlides)) {
/* content */
$('ul#flashcontent li').eq(0).stop().animate({opacity: 1}, 'slow');
/* buttons */
$('ul#flashbuttons span').eq(0).animate({opacity: 1}, 'slow');
}
currentSlide = 0;
}
timer = setTimeout('flashRotator()', delay);
}
Html:
<!--START jQuery-flash-rotator -->
<div id="flash">
<div class="fi">
<div class="fileft">
<ul id="flashimages">
<li><img src="flash/1.png" alt="" /></li>
<li><img src="flash/2.png" alt="" /></li>
<li><img src="flash/1.png" alt="" /></li>
<li><img src="flash/2.png" alt="" /></li>
</ul>
</div>
<div class="firight">
<ul id="flashcontent">
<li>
<p class="title">Artykuł 1</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</li>
<li>
<p class="title">Artykuł 2</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</li>
<li>
<p class="title">Artykuł 3</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</li>
<li>
<p class="title">Artykuł 4</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</li>
</ul>
<ul id="flashbuttons">
<li><a href="1" class="flash1"><span></span></a></li>
<li><a href="2" class="flash2"><span></span></a></li>
<li><a href="3" class="flash3"><span></span></a></li>
<li><a href="4" class="flash4"><span></span></a></li>
<li><a href="5" class="flash5"><span></span></a></li>
</ul>
</div>
</div>
</div>
<!--END jQuery-flash-rotator -->
Css:
/* START flash */
#flash {
position:relative;
margin:0 auto;
width:1002px;
height:306px;
}
#flash div.fi {
margin-top:20px;
width:100%;
height:306px;
background:url(../images/background_flash.png);
overflow:hidden;
}
/* START fileft */
#flash div.fi div.fileft {
margin-top:2px;
margin-left:2px;
float:left;
width:445px;
height:302px;
overflow:hidden;
}
ul#flashimages {
list-style-type:none;
margin:0;
margin-top:25px;
margin-left:25px;
padding:0;
}
#flash div.fi div.fileft img {
border-radius:4px;
border:5px solid #66FF00;
}
ul#flashimages li img {
opacity:1;
}
/* END fileft */
/* START firight */
#flash div.fi div.firight {
margin-top:2px;
float:left;
width:553px;
height:302px;
overflow:hidden;
}
ul#flashcontent {
margin:0;
padding:0;
width:528px;
height:200px;
overflow:hidden;
}
ul#flashcontent li {
margin-top:25px;
height:175px;
overflow:hidden;
}
ul#flashcontent li p {
text-align:justify;
letter-spacing:.5px;
line-height:18px;
padding:0;
margin:0;
color:#fff;
}
ul#flashcontent li p.title {
text-align:left;
font-size:18px;
font-weight:bold;
padding:0;
margin:0;
margin-bottom:10px;
color:#66FF00;
}
ul#flashbuttons {
position:relative;
left:200px;
list-style-type:none;
padding:0;
margin-top:59px;
width:100%;
height:20px;
overflow:hidden;
}
ul#flashbuttons li {
float:left;
margin:0;
margin-right:5px;
padding:0;
}
ul#flashbuttons li a {
background:url(../images/button_flash_sprite.png) no-repeat scroll top left;
display:block;
width:20px;
height:20px;
position:relative;
overflow:hidden;
}
ul#flashbuttons li a span {
background:url(../images/button_flash_sprite.png) no-repeat scroll bottom left;
background-position:0px -20px;
display:block;
width:20px;
height:20px;
position:relative;
overflow:hidden;
}
/* END firight */
/* END flash */