Here are a few of my developed scripts.
Slideshow with real text:
HTML:
<div id="banner">
<div id="banner-titles">
<p class="active">Specialists in energy recruitment</p>
<p>Lorem ipsum text 2</p>
<p>Lorem ipsum text 3</p>
</div><!--Banner-titles End-->
<div id="banner-imgs">
<img src="_images/_banners/banner1.jpg" alt="#" class="active" />
<img src="_images/_banners/banner2.jpg" alt="#" />
<img src="_images/_banners/banner3.jpg" alt="#" />
</div><!--Banner-imgs End-->
</div><!--Banner End-->
CSS
#banner {
position:relative;
height:374px;
padding:16px;
z-index:5;
}
#banner-imgs {
position:relative;
height:374px;
top:0px;
left:0px;
}
#banner-imgs IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#banner-imgs IMG.active {
z-index:10;
}
#banner-imgs IMG.last-active {
z-index:9;
}
#banner-titles {
position:absolute;
top:15px;
right:25px;
height:50px;
*z-index:10;
}
#banner-titles p {
position:absolute;
top:0;
right:0;
background:#fff;
color:#fff;
font-size:18px;
padding:10px 15px;
width:300px;
text-align:center;
z-index:8;
*display:none;
}
#banner-titles p.active {
z-index:11;
*display: inline-block;
}
#banner-titles p.last-active {
z-index:10;
*display:none;
}
jQuery
/* Home Page Banner */
function slideSwitch()
{
var $active = $('#banner-imgs IMG.active, #banner-titles p.active');
if ( $active.length == 0 ) $active = $('#banner-imgs IMG:last, #banner-titles p:last');
var $next = $active.next().length ? $active.next()
: $('#banner-imgs IMG:first, #banner-titles p:first');
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function()
{
$active.removeClass('active last-active');
});
}
$(function()
{
setInterval( "slideSwitch()", 5000 );
});
Slideshow with Play/Pause/Next buttons:
HTML:
<div id="carousel">
<img src="_images/_banners/banner1.jpg" alt="#" />
<img src="_images/_banners/banner2.jpg" alt="#" />
<img src="_images/_banners/banner3.jpg" alt="#" />
<img src="_images/_banners/banner4.jpg" alt="#" />
<div id="carousel-buttons">
<div id="previous"></div>
<div id="play-pause"></div>
<div id="next"></div>
</div>
</div><!--Carousel End-->
CSS
#carousel {
position:relative;
width:520px;
height:336px;
background-image:url("../_images/_banners/banner1.jpg");
}
#carousel img {
position:absolute;
top:0;
left:0;
display:none
z-index:9;
}
#carousel img.active {z-index:10;}
#carousel #carousel-buttons {
position:absolute;
bottom:16px;
left:16px;
z-index:15;
}
#carousel #carousel-buttons div {
float:left;
width:40px;
height:40px;
margin-right:2px;
background-position:top center;
background-repeat:no-repeat;
cursor:pointer;
}
#carousel #carousel-buttons #previous {background-image:url("_style-images/arrow-left.png");}
#carousel #carousel-buttons #next {background-image:url("_style-images/arrow-right.png");}
#carousel #carousel-buttons #play-pause {background-image:url("_style-images/play-pause.png");}
#carousel #carousel-buttons #play-pause.active {background-position:bottom center;}
jQuery
var slideshowInterval = null;
$(document).ready(function(){
// Homepage background Carousel
$("#carousel img").first().show().addClass("active");
function fadeNext()
{
if(!$("#carousel").is(":hover"))
{
if($("#carousel img:last").hasClass("active"))
{
$("#carousel img").first().show();
$("#carousel img").last().removeClass("active").fadeOut(1000, function ()
{
$("#carousel img").first().addClass("active");
});
}
else
{
$("#carousel img.active").next().addClass("active").fadeIn(1000, function()
{
$("#carousel img.active").first().removeClass("active").hide();
});
}
}
}
slideshowInterval = window.setInterval(fadeNext, 6000);
//Carousel Next Button
$("#carousel #carousel-buttons #next").click(function()
{
if($("#carousel img:last").hasClass("active"))
{
$("#carousel img").first().show().addClass("active");;
$("#carousel img").last().removeClass("active").hide();
}
else
{
$("#carousel img.active").next().addClass("active").show();
$("#carousel img.active").first().removeClass("active").hide();
}
});
//Carousel Previous Button
$("#carousel #carousel-buttons #previous").click(function()
{
if($("#carousel img:first").hasClass("active"))
{
$("#carousel img").last().show().addClass("active");;
$("#carousel img").first().removeClass("active").hide();
}
else
{
$("#carousel img.active").prev().addClass("active").show();
$("#carousel img.active").last().removeClass("active").hide();
}
});
//Play-Pause Next Button
$("#carousel #carousel-buttons #play-pause").click(function()
{
$("#play-pause").toggleClass("active");
if($("#play-pause").hasClass("active"))
{
// Pause
if(slideshowInterval != null)
{
window.clearInterval(slideshowInterval);
slideshowInterval = null;
}
}
else
{
// Play
if(slideshowInterval == null)
{
slideshowInterval = window.setInterval(fadeNext, 6000);
}
}
});
//TABBED BUTTONS
$(".tabbed-content .tab").click(function()
{
$(".tabbed-content .tab").removeClass("active");
$(this).addClass("active");
tabID = $(this).attr("rel");
$("#content .tab-content").hide();
$("#"+tabID).show();
});
});
Horizontal Carousel:
HTML:
<div id="banner">
<div id="banner-wrapper">
<div class="banner-block" id="banner1" rel="1">
<div class="pagination"></div>
<p>Banner</p>
</div><!--Banner1 End-->
<div class="banner-block" id="banner2" rel="2">
<div class="pagination"></div>
<p>Banner</p>
</div><!--Banner2 End-->
<div class="banner-block" id="banner3" rel="3">
<div class="pagination"></div>
<p>Banner</p>
</div><!--Banner3 End-->
<div class="banner-block" id="banner4" rel="4">
<div class="pagination"></div>
<p>Banner</p>
</div><!--Banner4 End-->
<div class="banner-block active" id="banner5" rel="5">
<div class="pagination"></div>
<p>Banner</p>
</div><!--Banner5 End-->
</div><!--Banner-wrapper End-->
</div><!--Banner End-->
CSS
#banner #banner-wrapper .banner-block {
display:block;
position:absolute;
height:296px;
top:1px;
width:688px;
color:#fff;
padding:70px 37px 0px;
}
#banner #banner-wrapper .banner-block .pagination {
background-image:url(_style-images/pagination-button.png);
background-position:top center;
background-repeat:no-repeat;
position:absolute;
bottom:9px;
right:9px;
display:block;
width:18px;
height:18px;
}
#banner #banner-wrapper .banner-block:hover .pagination {background-position:center bottom; cursor:pointer;}
#banner #banner-wrapper #banner1 {right:0px; z-index:1; background:#1b577a;}
#banner #banner-wrapper #banner2 {right:37px; z-index:2; background:#648699;}
#banner #banner-wrapper #banner3 {right:74px; z-index:3; background:#ed145b;}
#banner #banner-wrapper #banner4 {right:111px; z-index:4; background:#ac0031;}
#banner #banner-wrapper #banner5 {right:148px; z-index:5; background:#81012b;}
jQuery
$('.banner-block').live("click", function()
{
bannerID = $(this).attr("id");
if($(this).hasClass("opened"))
{
$(this).prevAll().andSelf().each(function()
{
$(this).stop().animate(
{
right: -259+(37*(6+parseInt($(this).attr('rel')))) + 'px',
}, 400, function()
{
// Animation complete.
});
});
$(this).prevAll().removeClass("opened");
$("#banner-wrapper .active").removeClass("active");
$(this).addClass("active");
}
else
{
$("#"+bannerID).nextAll().each(function()
{
$(this).stop().animate(
{
right: 910-(37*(6-parseInt($(this).attr('rel')))) + 'px',
}, 400, function()
{
// Animation complete.
});
});
$(this).nextAll().addClass("opened");
$("#banner-wrapper .active").removeClass("active");
$(this).addClass("active");
}
});
/*
Homepage banner auto rotation
*/
setInterval(function()
{
bannerID = $(this).attr("id");
if(!$("#banner-wrapper").is(":hover"))
{
if($(".banner-block").first().hasClass("active"))
{
$("#banner5").prevAll().andSelf().each(function()
{
$(this).stop().animate(
{
right: -259+(37*(6+parseInt($(this).attr('rel')))) + 'px',
}, 400, function()
{
// Animation complete.
});
});
$("#banner-wrapper .banner-block").removeClass("opened");
$("#banner-wrapper .active").removeClass("active");
$("#banner-wrapper .banner-block").last().addClass("active");
}
else
{
$("#banner-wrapper .active").stop().animate(
{
right: 910-(37*(6-parseInt($("#banner-wrapper .active").attr('rel')))) + 'px',
}, 400, function()
{
});
$("#banner-wrapper .active").prev().addClass("active");
$("#banner-wrapper .active").last().removeClass("active");
$("#banner-wrapper .active").nextAll().andSelf().addClass("opened");
}
}
}, 5000);
Standard Carousel with rotating image, text and pagination:
HTML:
<div class="banner">
<div class="banner-slides">
<div class="banner-slide bannerid1">
<h2>Bright Young Things1</h2>
<p><strong>Bright Young Things</strong> has been designed.</p>
<a href="#" class="orange-arrow">Bright Young Things</a>
<img src="_images/_banners/banner1.jpg" alt="#" />
</div><!--Banner1 End-->
<div class="banner-slide bannerid2">
<h2>Bright Young Things2</h2>
<p><strong>Bright Young Things</strong> has been designed.</p>
<a href="#" class="orange-arrow">Bright Young Things</a>
<img src="_images/_banners/banner2.jpg" alt="#" />
</div><!--Banner2 End-->
<div class="banner-slide bannerid3">
<h2>Bright Young Things3</h2>
<p><strong>Bright Young Things</strong> has been designed.</p>
<a href="#" class="orange-arrow">Bright Young Things</a>
<img src="_images/_banners/banner3.jpg" alt="#" />
</div><!--Banner3 End-->
</div><!--Banner-slides End-->
<div id="pagination">
<div rel="bannerid1" class="button activepag">1</div>
<div rel="bannerid2" class="button">2</div>
<div rel="bannerid2" class="button">3</div>
</div><!--Pagination End-->
</div><!--Banner End-->
CSS
/*/////////////////////////////////// Banner Stuff ////////////////////////////////////////////*/
#carousel {
position:relative;
width:912px;
height:300px;
display:block;
}
#carousel .banner-slides {
position:absolute;
top:0px;
left:0px;
width:655px;
height:384px;
display:block;
}
#carousel .banner-slides .banner-slide {
position:absolute;
top:0px;
left:0px;
display:none;
z-index:10;
}
#carousel .banner-slides .banner-slide.active {
z-index: 20;
}
#carousel .banner-slides .banner-slide h2 {
position:absolute;
bottom:137px;
left:16px;
border:0;
background:#fff;
font-size:28px;
width:auto;
line-height:110%;
color:#333;
padding:8px;
}
#carousel .banner-slides .banner-slide p {
font-size:18px;
position:absolute;
bottom:46px;
left:16px;
background:#fff;
color:#333;
width:400px;
padding:8px;
}
#carousel .banner-slides .banner-slide a.orange-arrow {
font-size:18px;
position:absolute;
bottom:16px;
left:16px;
}
#carousel #pagination {
bottom: 16px;
height: 25px;
right: 0;
padding-right: 16px;
position: absolute;
text-align: right;
width:auto;
z-index:50;
}
#carousel #pagination .button {
background: none repeat scroll 0 0 #f68933;
cursor: pointer;
display: inline-block;
text-align:center;
height: 25px;
width: 25px;
color:#fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.5)"; /* IE 8 */
filter: alpha(opacity=.5); /* IE 5-7 */
opacity: .5; /* Good browsers */
font-size:18px;
}
#carousel #pagination .button.activepag {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; /* IE 8 */
filter: alpha(opacity=1); /* IE 5-7 */
opacity: 1; /* Good browsers */
cursor:default;
}
#carousel #pagination .button:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; /* IE 8 */
filter: alpha(opacity=1); /* IE 5-7 */
opacity: 1; /* Good browsers */
}
jQuery
// Homepage background Carousel
$("#banner .banner-slides .banner-slide").first().show().addClass("active");
setInterval(function()
{
if(!$("#banner").is(":hover"))
{
if($("#banner .banner-slides .banner-slide:last").hasClass("active"))
{
$("#banner .banner-slides .banner-slide").first().show();
$("#banner .banner-slides .banner-slide.active").last().removeClass("active").fadeOut(1000, function ()
{
$("#banner .banner-slides .banner-slide").first().addClass("active");
});
$("#banner #pagination .button").first().addClass("activepag");
$("#banner #pagination .button").last().removeClass("activepag");
}
else
{
$("#banner .banner-slides .banner-slide.active").next().addClass("active").fadeIn(1000, function()
{
$("#banner .banner-slides .banner-slide.active").first().removeClass("active").hide();
});
$("#banner #pagination .button.activepag").next().addClass("activepag");
$("#banner #pagination .button.activepag").first().removeClass("activepag");
}
}
}, 6000);
$("#banner #pagination .button").click(function()
{
BannerID = $(this).attr("rel");
$("#banner .banner-slides .banner-slide").removeClass("active").removeClass("last-active").hide();
$("."+BannerID).show().addClass("active");
$("#banner #pagination .button").removeClass("activepag");
$(this).addClass("activepag");
});