基于jQuery的自适应图片左右切换
效果预览：http://hovertree.com/code/jquery/smjv6d0n.htm
基于jQuery编写的横向自适应幻灯片切换特效
全屏自适应jquery焦点图切换特效，在IE6这个蛋疼的浏览器兼容性问题上得到了和谐，兼容IE6。
适用浏览器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
代码如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>jQuery自适应满屏图片轮播切换 - 何问起</title> 6 <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script> 7 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/30/js/hoverslide.js"></script> 8 </head> 9 <body> 10 <style type="text/css"> 11 * { 12 margin:0; 13 padding:0; 14 list-style:none; 15 } 16 body { 17 background:#fff; 18 font:normal 12px/22px 宋体; 19 width:100%; 20 } 21 img { 22 border:0; 23 } 24 a { 25 text-decoration:none; 26 color:#333; 27 } 28 a:hover { 29 color:#1974A1; 30 } 31 #footer { 32 text-align:center; 33 } 34 .fullSlide { 35 width:100%; 36 position:relative; 37 height:410px; 38 background:#000; 39 } 40 .fullSlide .bd { 41 margin:0 auto; 42 position:relative; 43 z-index:0; 44 overflow:hidden; 45 } 46 .fullSlide .bd ul { 47 width:100% !important; 48 } 49 .fullSlide .bd li { 50 width:100% !important; 51 height:410px; 52 overflow:hidden; 53 text-align:center; 54 } 55 .fullSlide .bd li a { 56 display:block; 57 height:410px; 58 } 59 .fullSlide .hd { 60 width:100%; 61 position:absolute; 62 z-index:1; 63 bottom:0; 64 left:0; 65 height:30px; 66 line-height:30px; 67 } 68 .fullSlide .hd ul { 69 text-align:center; 70 } 71 .fullSlide .hd ul li { 72 cursor:pointer; 73 display:inline-block; 74 *display:inline; 75 zoom:1; 76 width:42px; 77 height:11px; 78 margin:1px; 79 overflow:hidden; 80 background:#000; 81 filter:alpha(opacity=50); 82 opacity:0.5; 83 line-height:999px; 84 } 85 .fullSlide .hd ul .on { 86 background:#f00; 87 } 88 .fullSlide .prev,.fullSlide .next { 89 display:block; 90 position:absolute; 91 z-index:1; 92 top:50%; 93 margin-top:-30px; 94 left:15%; 95 z-index:1; 96 width:40px; 97 height:60px; 98 background:url(http://hovertree.com/texiao/jquery/30/images/slider-arrow.png) -126px -137px #000 no-repeat; 99 cursor:pointer; 100 filter:alpha(opacity=50); 101 opacity:0.5; 102 display:none; 103 } 104 .fullSlide .next { 105 left:auto; 106 right:15%; 107 background-position:-6px -137px; 108 } 109 110 </style> 111 <div class="fullSlide"> 112 <div class="bd"> 113 <ul> 114 <li _src="url(http://hovertree.com/texiao/jquery/30/images/a.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/code/"></a></li> 115 <li _src="url(http://hovertree.com/texiao/jquery/30/images/b.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/tiku/"></a></li> 116 <li _src="url(http://hovertree.com/texiao/jquery/30/images/d.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://tool.hovertree.com/"></a></li> 117 <li _src="url(http://hovertree.com/texiao/jquery/30/images/d.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="http://run.hovertree.com/code/"></a></li> 118 <li _src="url(http://hovertree.com/texiao/jquery/30/images/e.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="http://keleyi.com"></a></li> 119 </ul> 120 </div> 121 <div class="hd"> 122 <ul> 123 </ul> 124 </div> 125 <span class="prev"></span> <span class="next"></span> </div> 126 <script type="text/javascript"> 127 jQuery(".fullSlide").hover(function() { 128 jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5) 129 }, 130 function() { 131 jQuery(this).find(".prev,.next").fadeOut() 132 }); 133 jQuery(".fullSlide").hoverslide({ 134 titCell: ".hd ul", 135 mainCell: ".bd ul", 136 effect: "fold", 137 autoPlay: true, 138 autoPage: true, 139 trigger: "click", 140 startFun: function(i) { 141 var curLi = jQuery(".fullSlide .bd li").eq(i); 142 if ( !! curLi.attr("_src")) { 143 curLi.css("background-image", curLi.attr("_src")).removeAttr("_src") 144 } 145 } 146 }); 147 </script> 148 <div style="text-align:center;clear:both; font-size:12px;"> 149 <p><a href="http://hovertree.com" target="_blank">何问起</a>分享网站整理</p> 150 <p>适用浏览器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> 151 <p>来源：何问起</p> 152 </div> 153 </body> 154 </html>
