css
#topCarousel .slideshow {
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
#topCarousel .slideshow li {
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
}
#topCarousel .slideshow li.ishow {
position: relative;
z-index:500;
}
#topCarousel .slideshow li img {
display: block;
line-height: 1;
width: 100%;
}
html
<div id="topCarousel">
<ul class="slideshow">
<?php
$count_for = 0;
foreach ($static_top_banners as $static_top_banner):
$originalurl = $this->thumbmanager->thumb_url($static_top_banner);
?>
<li class="<?php echo $count_for === 0 ? 'ishow' : ''; ?>">
<img src="<?php echo $originalurl; ?>" alt=""/>
</li>
<?php
$count_for++;
endforeach;
?>
</ul>
<div class="clear: both;"></div>
</div><!-- /.carousel -->
<script type="text/javascript">
$(function() {
h2o.imgsViewer($('#topCarousel .slideshow'));
});
</script>
js
imgsViewer: function(obj) {
var fadeDuration = 2000, slideDuration = 4000, currentIndex = 1, nextIndex = 1,
nextSlide = function() {
nextIndex = currentIndex + 1;
if (nextIndex > $(obj).children().size()) {
nextIndex = 1;
}
var next = $(obj).find('li:nth-child(' + nextIndex + ')');
var curr = $(obj).find('li:nth-child(' + currentIndex + ')');
next.addClass('ishow').animate({opacity: 1.0}, fadeDuration);
curr.removeClass('ishow').animate({opacity: 0.0}, fadeDuration);
currentIndex = nextIndex;
setTimeout(nextSlide, slideDuration);
};
$(obj).find('li').css({opacity: 0.0});
$(obj).find('li:nth-child(' + nextIndex + ')')
.addClass('ishow').animate({opacity: 1.0}, fadeDuration);
setTimeout(nextSlide, slideDuration);
return this;
}
No comments:
Post a Comment