Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Khung trưng bày ảnh tuyệt đẹp với jQuery
URL: https://www.javascriptbank.com/awesome-javascript-image-rotator-with-jquery.html
Đây là một hiệu ứng JavaScript chuyển ảnh cực kì tuyệt vời dùng thư viện jQuery để trình diễn các hoạt hóa. Và bạn vẫn có thể dùng hiệu ứng này để làm một trình diễn ảnh chuyển động (slideshow) hoặc một phòng trưng bày ảnh (gallery) đều được.Ngay bây giờ, bạn có thể xem trực tiếp cách hoạt động của khung trưng bày ảnh này thông qua ví dụ mẫu JavaScript trực tiếp, và cài đặt cho riêng mình với các mã nguồn JavaScript/CSS/HTML đã được cung cấp sẵn. Hoặc bạn có thể đợi đến bài viết kế tiếp vào ngày mai, jsB@nk sẽ hướng dẫn bạn chi tiết cách tạo hiệu ứng này.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Khung trưng bày ảnh tuyệt đẹp với 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>