基于jQuery的自适应图片左右切换

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“”，获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果预览：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(https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/59ef062d-f2d8-41af-ad71-5a0108654624-1639931099901.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://tool.hovertree.com/"></a></li> 117 <li _src="url(https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/59ef062d-f2d8-41af-ad71-5a0108654624-1639931099901.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>