Internet has many uses jquery slideshow with effects are great, and often they will download and edit them in the style of your site, this slide show I changed my style from the example “Featured Content Slider Using jQuery “download on the network. The change of color and texture of the sub items is probably much less make a difference ^ ^…
Source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>featured content</title> <script TYPE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script TYPE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script TYPE="text/javascript"> $(document).ready(FUNCTION(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true); }); </script> <style TYPE="text/css"> img{ border:0;} h2{ margin:0; padding:0; outline:0; border:0;} #featured{ width:300px; position:relative; height:150px; background:#fff; } #featured ul.ui-tabs-nav{ float:left; margin-top:150px; list-style:none; padding:0; margin:0; width:300px; } #featured ul.ui-tabs-nav li{ font-size:12px; color:#666; float:left; width:100px; margin-top:1px; } #featured ul.ui-tabs-nav li img{ float:left; margin:0 5px 0 0px; display:inline; } #featured ul.ui-tabs-nav li span h2{ font-size:11px; font-family:arial; font-weight:bold; color:#FFF; font-style:normal;} #featured ul.ui-tabs-nav li span{ font-size:10px; font-family:arial, Geneva, sans-serif; line-height:18px; color:#c4c4c4; font-style:italic; padding-left:5px; float:left; } #featured li.ui-tabs-nav-item a{ display:block; height:40px; color:#333; background:url(bg.gif) repeat-x; line-height:18px; text-decoration:none; } #featured li.ui-tabs-nav-item a:hover{ background:url(bg1.gif) repeat-x; } #featured li.ui-tabs-selected{ background:url(bg1.gif) repeat-x; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:url(bg1.gif) repeat-x; } #featured .ui-tabs-panel{ width:300px; height:150px; position:relative; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a.readmore{ float:right; width:100%; text-align:right; } #featured .info a:hover{ text-decoration:underline; } #featured .ui-tabs-hide{ display:none; } </style> </head> <body> <div ID="featured" > <!-- First Content --> <div ID="fragment-1" class="ui-tabs-panel" style=""> <img src="1.gif" alt="" /> </div> <!-- Second Content --> <div ID="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="2.gif" alt="" /> </div> <!-- Third Content --> <div ID="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="3.gif" alt="" /> </div> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected first" ID="nav-fragment-1"><a href="#fragment-1"><span><h2>Boy Games</h2>All boy games</span></a></li> <li class="ui-tabs-nav-item ui-tabs-selected first" ID="nav-fragment-2"><a href="#fragment-2"><span><h2>Gun Games</h2>All Gun Games</span></a></li> <li class="ui-tabs-nav-item ui-tabs-selected first" ID="nav-fragment-3"><a href="#fragment-3"><span><h2>Heat Games</h2>All boy games</span></a></li> </ul> </div> </div> </body> </html> |
Thanks for visite site 