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"); });