<!doctype html> <html lang="en"> <head> <title>Fancy Slideshow Navigation Using jQuery (demo)</title> <style type="text/css"> #slideshow { 900px; height: 500px; overflow: hidden; position: relative; margin: 0 auto; top: 20px; } #slideshow-reel { 5400px; height: 450px; position: absolute; top: 0; left: 0; } #slideshow-reel .slide { 900px; height: 450px; float: left; background-color: gray; } #slideshow-reel .slide:nth-child(2n+1) { background-color: #333; } #slideshow-reel h1 { margin: 25px 60px; color: #FFF; font-size: 3em; text-shadow: 0 -1px 1px #333; } /* arrow navigation */ .slideshow-arrow { display: block; position: absolute; top: 190px; 0; height: 0; border-style: solid; border- 28px 21px; border-color: transparent; outline: none; } .slideshow-arrow:hover { opacity: .5; filter: alpha(opacity=50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } #slideshow-left { left: 0; border-right-color: #fff; } #slideshow-right { right: 0; border-left-color: #fff; } /* bottom navigation */ #slideshow-nav { position: absolute; left: 0; bottom: 0; 900px; } #slideshow-nav .nav-item { float: left; 150px; padding: 11px 0; outline: none; } #slideshow-nav .nav-item-line { float: left; 68px; height: 1px; line-height: 1px; margin: 3px 0; background-color: #bbb; } #slideshow-nav .nav-item-line-hidden { background-color: transparent; } #slideshow-nav .nav-item-dot { float: left; 8px; height: 8px; margin: 0 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #ed1d27; } /* active nav dot */ #active-nav-item { display: block; position: absolute; top: 0; left: 0; 30px; height: 30px; margin-left: 60px; background-color: #8e8d8b; background-color: rgba(28, 27, 23, .5); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #active-nav-item .active-nav-item-inner { display: inline-block; 8px; height: 8px; margin: 11px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #000; } html { height: 100%; } body { height: 100%; margin: 0; padding: 0; min-height: 600px; position: relative; } </style> <!--[if lt IE 7]> <style type="text/css"> .slideshow-arrow, #slideshow-nav .nav-item-line, #slideshow-nav .nav-item-dot { overflow: hidden; } .slideshow-arrow, .slideshow-arrow:hover { border-top-color: pink; border-bottom-color: pink; filter: chroma(color=pink); } #slideshow-left { border-left-color: pink; } #slideshow-right { border-right-color: pink; } </style> <![endif]--> </head> <body> <div id="slideshow"> <div id="slideshow-reel"> <div class="slide"> <h1>Slide 1</h1> </div> <div class="slide"> <h1>Slide 2</h1> </div> <div class="slide"> <h1>Slide 3</h1> </div> <div class="slide"> <h1>Slide 4</h1> </div> <div class="slide"> <h1>Slide 5</h1> </div> <div class="slide"> <h1>Slide 6</h1> </div> </div> <a href="#" id="slideshow-left" class="slideshow-arrow"></a> <a href="#" id="slideshow-right" class="slideshow-arrow"></a> <div id="slideshow-nav"> <a href="#" class="nav-item"> <span class="nav-item-line nav-item-line-hidden"></span> <span class="nav-item-dot"></span> <span class="nav-item-line"></span> </a> <a href="#" class="nav-item"> <span class="nav-item-line"></span> <span class="nav-item-dot"></span> <span class="nav-item-line"></span> </a> <a href="#" class="nav-item"> <span class="nav-item-line"></span> <span class="nav-item-dot"></span> <span class="nav-item-line"></span> </a> <a href="#" class="nav-item"> <span class="nav-item-line"></span> <span class="nav-item-dot"></span> <span class="nav-item-line"></span> </a> <a href="#" class="nav-item"> <span class="nav-item-line"></span> <span class="nav-item-dot"></span> <span class="nav-item-line"></span> </a> <a href="#" class="nav-item"> <span class="nav-item-line"></span> <span class="nav-item-dot"></span> <span class="nav-item-line nav-item-line-hidden"></span> </a> <span id="active-nav-item"> <span class="active-nav-item-inner"></span> </span> </div> </div> <p style="color: #999; margin: 30px 15px;text-align:center">More demo<a href="http://www.nfl-buy.com/nfl-jerseys-c-1" style="color: #999;">cheap nfl jerseys</a></p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script> <script type="text/javascript"> $(function() { function changeSlide( newSlide ) { // cancel any timeout clearTimeout( slideTimeout ); // change the currSlide value currSlide = newSlide; // make sure the currSlide value is not too low or high if ( currSlide > maxSlide ) currSlide = 0; else if ( currSlide < 0 ) currSlide = maxSlide; // animate the slide reel $slideReel.animate({ left : currSlide * -900 }, 400, 'swing', function() { // hide / show the arrows depending on which frame it's on if ( currSlide == 0 ) $slideLeftNav.hide(); else $slideLeftNav.show(); if ( currSlide == maxSlide ) $slideRightNav.hide(); else $slideRightNav.show(); // set new timeout if active if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200); }); // animate the navigation indicator $activeNavItem.animate({ left : currSlide * 150 }, 400, 'swing'); } function nextSlide() { changeSlide( currSlide + 1 ); } // define some variables / DOM references var activeSlideshow = true, currSlide = 0, slideTimeout, $slideshow = $('#slideshow'), $slideReel = $slideshow.find('#slideshow-reel'), maxSlide = $slideReel.children().length - 1, $slideLeftNav = $slideshow.find('#slideshow-left'), $slideRightNav = $slideshow.find('#slideshow-right'), $activeNavItem = $slideshow.find('#active-nav-item'); // set navigation click events // left arrow $slideLeftNav.click(function(ev) { ev.preventDefault(); activeSlideshow = false; changeSlide( currSlide - 1 ); }); // right arrow $slideRightNav.click(function(ev) { ev.preventDefault(); activeSlideshow = false; changeSlide( currSlide + 1 ); }); // main navigation $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) { ev.preventDefault(); activeSlideshow = false; changeSlide( $(this).index() ); }); // start the animation slideTimeout = setTimeout(nextSlide, 1200); }); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3123668-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>