Hi all,
Just wondering if someone can help me code the following.
I want to use a fading effect to rotate a series of images (7 in total), within the CSS and code already defined below:
I came across the following script:Code:<style="text/css">
.rotate {float: left;width: 160px;height: 215px;background-color: #FFFFFF;border: 2px solid #0066CC;margin: 0px 10px 10px 0px;text-align: center;overflow: hidden;}
</style>
<div class="rotate">
<span>
<a href="#">
<img border="0" src="/images/catimage.jpg" width="160" height="160" alt="" class="" />
</a>
</span>
<div onclick="javascript:document.location.href='/';">
<a href="/">BRANDS</a>
</div>
</div>
Can someone assist me in coding this as a solution based on my orginal HTML and CSS above as I have tried to amend this script; however, it's not right and I could really do with some help.Code:<script type="text/javascript">
function theRotator() {
//Set the opacity of all images to 0
$('div#rotator ul li').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('div#rotator ul li:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('rotate()',6000);
}
function rotate() {
//Get the first image
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
//Load the slideshow
theRotator();
});
</script>
<div id="rotator">
<ul>
<li class="show">
<a href="javascript:void(0)">
<img src="images/image-1.jpg" width="500" height="313" alt="pic1" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/image-2.jpg" width="500" height="313" alt="pic2" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/image-3.jpg" width="500" height="313" alt="pic3" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/image-4.jpg" width="500" height="313" alt="pic4" />
</a>
</li>
</ul>
</div>
The CSS
/* rotator in-page placement */
div#rotator {
position:relative;
height:345px;
margin-left: 15px;
}
/* rotator css */
div#rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div#rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
div#rotator ul li.show {
z-index:500;
}
Many thanks
