你的位置:首页 > Java教程

[Java教程]基于jQuery的自适应图片左右切换


效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm

基于jQuery编写的横向自适应幻灯片切换特效

全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6。

适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

hoverslide

代码如下:

 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="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>

网页特效:http://www.cnblogs.com/roucheng/p/texiao.html