效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm基于jQuery编写的横向自适应幻灯片切换特效全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6。适用浏览器:IE6、IE7、IE8、 ...
效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm
基于jQuery编写的横向自适应幻灯片切换特效
全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6。
适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
代码如下:
1 <!DOCTYPE html> 2 <html ="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='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script> 7 <script type="text/javascript" src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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>
原标题:基于jQuery的自适应图片左右切换
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。