Billboard Banner Carousel with buttons


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $(document).ready(function(){
  2.  
  3. $("#bannerImg1").show();
  4.  
  5. $("#bannerLink").click(function() {
  6. var content_click = $(this).attr("accesskey");
  7. content_click;
  8. });
  9.  
  10. $("a.bannerThumb").hover(
  11. function() {
  12.  
  13. $("#bannerImages img").fadeOut("slow");
  14. var content_show = $(this).parent("li").attr("title");
  15. $("#"+content_show).fadeIn("slow");
  16. $(this).animate({marginTop: "0px", height: "52px"});
  17. var content_link = $(this).attr("href");
  18. $("#bannerLink").attr("href", content_link);
  19. var content_target = $(this).attr("target");
  20. $("#bannerLink").attr("target", content_target);
  21. var content_click = $(this).attr("accesskey");
  22. $("#bannerLink").attr("accesskey", content_click);
  23.  
  24. },
  25. function () {
  26.  
  27. $(this).animate({marginTop: "20px",height: "52px"});
  28.  
  29. });
  30.  
  31. });
  32.  
  33. <div id='bannerCarousel'>
  34. <div id='bannerImages'>
  35. <img id='bannerImg1' src='ImageUrl1' alt='strText1' title='strText1' />
  36. <img id='bannerImg2' src='ImageUrl2' alt='strText2' title='strText2' />
  37. <img id='bannerImg3' src='ImageUrl3' alt='strText3' title='strText3' />
  38. <img id='bannerImg4' src='ImageUrl4' alt='strText4' title='strText4' />
  39. <img id='bannerImg5' src='ImageUrl5' alt='strText5' title='strText5' />
  40. </div>
  41. <a id='bannerLink' href='LinkUrl1' onclick='pageTracker._trackEvent(GALinkDesc1)' accesskey='pageTracker._trackEvent(GALinkDesc1)' target='_blank'></a>
  42. <ul>
  43. <li title='bannerImg1'><a onclick='pageTracker._trackEvent(GALinkDesc1)' accesskey='pageTracker._trackEvent(GALinkDesc1)' class='bannerThumb' title='strText1' href='LinkUrl1' style='background-image:url(ImageThumbUrl1);' target='_blank'>strText1</a></li>
  44. <li title='bannerImg2'><a onclick='pageTracker._trackEvent(GALinkDesc1)' accesskey='pageTracker._trackEvent(GALinkDesc1)' class='bannerThumb' title='strText2' href='LinkUrl2' style='background-image:url(ImageThumbUrl2);' target='_blank'>strText2</a></li>
  45. <li title='bannerImg3'><a onclick='pageTracker._trackEvent(GALinkDesc1)' accesskey='pageTracker._trackEvent(GALinkDesc1)' class='bannerThumb' title='strText3' href='LinkUrl3' style='background-image:url(ImageThumbUrl3);' target='_blank'>strText3</a></li>
  46. <li title='bannerImg4'><a onclick='pageTracker._trackEvent(GALinkDesc1)' accesskey='pageTracker._trackEvent(GALinkDesc1)' class='bannerThumb' title='strText4' href='LinkUrl4' style='background-image:url(ImageThumbUrl4);' target='_blank'>strText4</a></li>
  47. <li title='bannerImg5'><a onclick='pageTracker._trackEvent(GALinkDesc1)' accesskey='pageTracker._trackEvent(GALinkDesc1)' class='bannerThumb' title='strText5' href='LinkUrl5' style='background-image:url(ImageThumbUrl5);' target='_blank'>strText5</a></li>
  48. </ul>
  49. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.