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

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

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

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

效果预览：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>