Version complète: jsB@nk » Framework » jQuery » Awesome JavaScript Image Rotator avec jQuery
URL: https://www.javascriptbank.com/awesome-javascript-image-rotator-with-jquery.html
Il s'agit d'un impressionnant rotator image JavaScript en utilisant jQuery pour effectuer une animation, avec un peu de CSS pour le style Vous pouvez
Version complète: jsB@nk » Framework » jQuery » Awesome JavaScript Image Rotator avec jQuery
URL: https://www.javascriptbank.com/awesome-javascript-image-rotator-with-jquery.html
<style type="text/css">body {margin: 0; padding: 0;font: 10px normal Arial, Helvetica, sans-serif;}* {margin: 0; padding: 0; outline: none;}img {border: none;}fieldset h1 {font: 3em normal Georgia, "Times New Roman", Times, serif;color: #fff;text-align: center;background: url(h1_bg.gif) no-repeat;text-indent: -99999px;margin: 100px 0 10px;}.container {overflow: hidden;width: 900px;margin: 0 auto;}#main {padding: 10px;background: #f0f0f0;border: 1px solid #ccc;}fieldset a {color: #fff;}/*--Main Image Preview--*/.main_image {width: 598px; height: 456px;float: left;background: #333;position: relative;overflow: hidden;color: #fff;}.main_image h2 {font-size: 2em;font-weight: normal;margin: 0 0 5px;padding: 10px;}.main_image p {font-size: 1.2em;padding: 10px;margin: 0;line-height: 1.6em;}.block small { padding: 0 0 0 20px; background: url(icon_calendar.gif) no-repeat 0 center; font-size: 1em; }.main_image .block small {margin-left: 10px;}.main_image .desc{position: absolute;bottom: 0;left: 0;width: 100%;display: none;}.main_image .block{width: 100%;background: #111;border-top: 1px solid #000;}.main_image a.collapse {background: url(btn_collapse.gif) no-repeat left top;height: 27px; width: 93px;text-indent: -99999px;position: absolute; top: -27px; right: 20px; }.main_image a.show {background-position: left bottom;} .image_thumb {float: left;width: 299px;background: #f0f0f0;border-right: 1px solid #fff;border-top: 1px solid #ccc;}.image_thumb img {border: 1px solid #ccc; padding: 5px; background: #fff; float: left;}.image_thumb ul {margin: 0; padding: 0;list-style: none;}.image_thumb ul li{margin: 0; padding: 12px 10px;background: #f0f0f0 url(nav_a.gif) repeat-x;width: 279px;float: left;border-bottom: 1px solid #ccc;border-top: 1px solid #fff;border-right: 1px solid #ccc;}.image_thumb ul li.hover {background: #ddd;cursor: pointer;}.image_thumb ul li.active {background: #fff;cursor: default;}html .image_thumb ul li h2 {font-size: 1.5em; margin: 5px 0; padding: 0;}.image_thumb ul li .block {float: left; margin-left: 10px;padding: 0;width: 170px;}.image_thumb ul li p{display: none;}</style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript">$(document).ready(function() {//Show Banner$(".main_image .desc").show(); //Show Banner$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity//Click and Hover events for thumbnail list$(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ //Set Variablesvar imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Imagevar imgTitle = $(this).find('a').attr("href"); //Get Main Image URLvar imgDesc = $(this).find('.block').html(); //Get HTML of blockvar imgDescHeight = $(".main_image").find('.block').height();//Calculate height of blockif ($(this).is(".active")) { //If it's already active, then...return false; // Don't click through} else {//Animate the Teaser$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250 );$(".main_image img").attr({ src: imgTitle , alt: imgAlt});});}$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists$(this).addClass('active'); //add class of 'active' on this list onlyreturn false;}) .hover(function(){$(this).addClass('hover');}, function() {$(this).removeClass('hover');});//Toggle Teaser$("a.collapse").click(function(){$(".main_image .block").slideToggle();$("a.collapse").toggleClass("show");});});//Close Function</script><div id="main" class="container"><div class="main_image"><img src="banner5.jpg" alt="Puzzled Putter"><div style="display: block;" class="desc"><a href="#" class="collapse">Close Me!</a><div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block"><h2>Puzzled Putter</h2><small>04/14/09</small><p>Autemconventio nimis quis ad, nisl secundum sed, facilisi, vicis augueregula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p></div></div></div><div class="image_thumb"><ul><li class=""><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow"></a><div class="block"><h2>Slowing Down</h2><small>04/10/09</small><p>Autemconventio nimis quis ad, nisl secundum sed, facilisi, vicis augueregula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,volutpat et.<br><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p></div></li><li class=""><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight"></a><div class="block"><h2>Organized Food Fight</h2><small>04/11/09</small><p>Autemconventio nimis quis ad, nisl secundum sed, facilisi, vicis augueregula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,volutpat et. Autem conventio nimis quis ad, nisl secundum sed,facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquamvalidus eum quadrum, volutpat et.</p><p>Autem conventio nimisquis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p></div></li><li class=""><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species"></a><div class="block"><h2>Endangered Species</h2><small>04/12/09</small><p>Autemconventio nimis quis ad, nisl secundum sed, facilisi, vicis augueregula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,volutpat et.<br><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p></div></li><li class=""><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution"></a><div class="block"><h2>Evolution</h2><small>04/13/09</small><p>Autemconventio nimis quis ad, nisl secundum sed, facilisi, vicis augueregula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,volutpat et. Autem conventio nimis quis ad, nisl secundum sed,facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquamvalidus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p></div></li><li class="active hover"><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter"></a><div class="block"><h2>Puzzled Putter</h2><small>04/14/09</small><p>Autemconventio nimis quis ad, nisl secundum sed, facilisi, vicis augueregula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p></div></li><li class=""><a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit"></a><div class="block"><h2>Secret Habit</h2><small>04/15/09</small><p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p></div></li></ul></div></div>