devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）

作者：代码探险家 | 2024-07-16 14:20:07

赞

踩

前端3d轮播切换特效

这里写图片描述

还是那句话，废话少说，直接上源代码：http://download.csdn.net/detail/cometwo/9387901 

  1. <html>
  2. <head>
  3. <title>JS 实现3D立体效果的图片幻灯切换</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <style>
  6. html {background:#000}
  7. body, ul {margin:0;padding:0}
  8. li {list-style:none}
  9. img {border:none;display:block}
  10. .slide-wp {
  11. width: 500px;
  12. height: 300px;
  13. overflow: hidden;
  14. position: absolute;
  15. left: 50%;
  16. top: 50%;
  17. margin-left: -250px;
  18. margin-top: -150px;
  19. }
  20. .nav-wp {
  21. position: absolute;
  22. background: #ccc;
  23. top: 50%;
  24. margin-top: 170px;
  25. left: 50%;
  26. margin-left: -100px;
  27. border-radius: 4px;
  28. -moz-border-radius: 4px;
  29. -webkit-border-radius: 4px;
  30. padding: 0 20px 6px 10px;
  31. _padding: 0 20px 2px 10px;
  32. }
  33. .nav li {
  34. float: left;
  35. margin-left: 10px;
  36. font-size: 20px;
  37. font-weight: bold;
  38. font-family: tahoma;
  39. color: #22739e;
  40. cursor: pointer;
  41. height: 22px;
  42. }
  43. .nav li.cur{color: #ff7a00}
  44. .next {
  45. position:absolute;
  46. top: 0;
  47. left: 160px;
  48. padding: 4px 8px;
  49. color: #ff7a00;
  50. background: #ccc;
  51. height: 20px;
  52. border-radius: 4px;
  53. -moz-border-radius: 4px;
  54. -webkit-border-radius: 4px;
  55. cursor: pointer;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2>
  61. <div id="slider" class="slide-wp">
  62. <ul>
  63. <li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/1.jpg"  alt="" /></a></li>
  64. <li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/2.jpg"  alt="" /></a></li>
  65. <li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/3.jpg"  alt="" /></a></li>
  66. <li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/4.jpg"  alt="" /></a></li>
  67. <li><a href="http://www.newxing.com/" target="_blank"><img src="http://www.newxing.com/img/450/5.jpg"  alt="" /></a></li>
  68. </ul>
  69. </div>
  70. <div class="nav-wp">
  71. <ul id="nav" class="nav">
  72. <li onclick="mySlider.pos(0)">●</li>
  73. <li onclick="mySlider.pos(1)">●</li>
  74. <li onclick="mySlider.pos(2)">●</li>
  75. <li onclick="mySlider.pos(3)">●</li>
  76. <li onclick="mySlider.pos(4)">●</li>
  77. </ul>
  78. <a class="next" onclick="mySlider.move()">next</a>
  79. </div>
  80. <script type="text/javascript">
  81. var HR = {
  82.  $ : function(i) {return document.getElementById(i)},
  83.  $$ : function(c, p) {return p.getElementsByTagName(c)},
  84.  ce : function(i, t) {
  85.   var o = document.createElement(i);
  86.   t.appendChild(o);
  87.   return o;
  88.  }
  89. };
  90. HR.slider3D = function () {
  91.  var init = function (o) {
  92.   this.o = o;
  93.   var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
  94.   this.l = li.length;
  95.   this.w = wp.offsetWidth;
  96.   this.h = wp.offsetHeight;
  97.   this.at = o.auto? o.auto : 4;
  98.   var con = this.con = HR.ce('div', wp);
  99.   con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';
  100.   ul.style['display'] = 'none'; 
  101.   this.a1 = HR.ce('a', con); 
  102.   this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden'; 
  103.   this.a2 = HR.ce('a', con);
  104.   this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
  105.   this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
  106.   this.img = HR.$$('img', ul);
  107.   this.s = o.maskSize ? o.maskSize : 5;
  108.  
  109.   this.mask11 = HR.ce('span', this.a1);
  110.   this.mask12 = HR.ce('span', this.a1);
  111.   this.mask21 = HR.ce('span', this.a2);
  112.   this.mask22 = HR.ce('span', this.a2);
  113.  
  114.   this.pos(0);
  115.  }
  116.  init.prototype = {
  117.   pos : function (i) {
  118.    clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;
  119.    var navli = HR.$$('li', HR.$(this.o.navId));
  120.    for (var j=0; j<navli.length; j++) {
  121.     navli[j].className = i == j ? 'cur' : '';
  122.    }
  123.    var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
  124.    img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
  125.    img1.width = this.w;
  126.    img2.src = this.img[i].src;
  127.    img2.width = 0;
  128.    img1.height = img2.height = this.h;
  129.    this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';
  130.    this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
  131.    this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
  132.    this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
  133.    this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
  134.   },
  135.   anim : function (i) {
  136.    var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
  137.    if (w2 == this.w) {
  138.     clearInterval(this.li[i].a);
  139.     HR.$$('img', this.a1)[0].width = 0;
  140.     HR.$$('img', this.a2)[0].width = this.w;
  141.     this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
  142.     this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
  143.     this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
  144.     this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
  145.    }else {
  146.     HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
  147.     HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
  148.     this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
  149.     this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
  150.     this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
  151.     this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
  152.     if (!this.au) this.auto();
  153.    }
  154.   },
  155.   auto : function () {
  156.    var _this = this;
  157.    this.au = setInterval(function(){_this.move()}, this.at*1000);
  158.   },
  159.   move : function () {
  160.    var n = this.cur==this.l-1 ? 0 : this.cur+1;
  161.    this.pos(n);
  162.   }
  163.  }
  164.  return init;
  165. }();
  166. var mySlider = new HR.slider3D({
  167.  id: 'slider',
  168.  maskSize: 6,
  169.  navId: 'nav',
  170.  auto: 4
  171. })</SCRIPT></body>
  172. </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172

高级扩展

这里写图片描述

  1.  <html>
  2.     <head>
  3.         <title>JS 实现3D立体效果的图片幻灯切换</title>
  4.         <meta charset="utf-8" />
  5.         <style>
  6.             html {
  7.                 background: #000
  8.             }
  9.  
  10.             body,
  11.             ul {
  12.                 left: 0px;
  13.                 top: 0px;
  14.                 margin: 0;
  15.                 padding: 0
  16.             }
  17.             h1{
  18.                 border: 1px solid blue;
  19.                 text-align: center;
  20.                 color:red;
  21.                 padding: 10px;
  22.                 font-size: 25px;
  23.             }
  24.             li,a,img {
  25.                 display: block;
  26.                 list-style: none;
  27.                 border: none;
  28.             }
  29.             .slide-wp {
  30.                 height: 400px;
  31.                 width:100%;
  32.                 overflow: hidden;
  33.                 position: relative;
  34.                 margin: 0 auto;
  35.                 border: 1px solid red;
  36.             }
  37.             .slide-wp ul {
  38.                 position: relative;
  39.             }
  40.  
  41.  
  42.  
  43.  
  44.  
  45.             .nav-wp {
  46.                 position: absolute;
  47.                 background: #ccc;
  48.                 top: 50%;
  49.                 margin-top: 170px;
  50.                 left: 50%;
  51.                 margin-left: -100px;
  52.                 border-radius: 4px;
  53.                 -moz-border-radius: 4px;
  54.                 -webkit-border-radius: 4px;
  55.                 padding: 0 20px 6px 10px;
  56.                 _padding: 0 20px 2px 10px;
  57.             }
  58.  
  59.             .nav li {
  60.                 float: left;
  61.                 margin-left: 10px;
  62.                 font-size: 20px;
  63.                 font-weight: bold;
  64.                 font-family: tahoma;
  65.                 color: blue;      /*默认颜色*/
  66.                 cursor: pointer;
  67.                 height:20px;
  68.             }
  69.  
  70.             .nav li.cur {
  71.                 color: red;      
  72.             }
  73.  
  74.             .next {
  75.                 position: absolute;
  76.                 top: 0;
  77.                 left: 160px;
  78.                 padding: 4px 8px;
  79.                 color: #ff7a00;
  80.                 background: #ccc;
  81.                 height: 20px;
  82.                 border-radius: 4px;
  83.                 -moz-border-radius: 4px;
  84.                 -webkit-border-radius: 4px;
  85.                 cursor: pointer;
  86.             }
  87.         </style>
  88.     </head>
  89.  
  90.     <body>
  91.         <h1>IE6可能不支持</h1>
  92.         <div id="slider" class="slide-wp">
  93.             <ul>
  94.                 <li>
  95.                     <a href="http://www.newxing.com/" target="_blank"><img src="img/img1.jpg" alt="" /></a>
  96.                 </li>
  97.                 <li>
  98.                     <a href="http://www.newxing.com/" target="_blank"><img src="img/img2.jpg" alt="" /></a>
  99.                 </li>
  100.                 <li>
  101.                     <a href="http://www.newxing.com/" target="_blank"><img src="img/img3.jpg" alt="" /></a>
  102.                 </li>
  103.                 <li>
  104.                     <a href="http://www.newxing.com/" target="_blank"><img src="img/img4.jpg" alt="" /></a>
  105.                 </li>
  106.                 <li>
  107.                     <a href="http://www.newxing.com/" target="_blank"><img src="img/img5.jpg" alt="" /></a>
  108.                 </li>
  109.             </ul>
  110.         </div>
  111.         <div class="nav-wp">
  112.             <ul id="nav" class="nav">
  113.                 <li onclick="mySlider.pos(0)">●</li>
  114.                 <li onclick="mySlider.pos(1)">●</li>
  115.                 <li onclick="mySlider.pos(2)">●</li>
  116.                 <li onclick="mySlider.pos(3)">●</li>
  117.                 <li onclick="mySlider.pos(4)">●</li>
  118.             </ul>
  119.             <a class="next" onclick="mySlider.move()">next</a>
  120.         </div>
  121.  
  122.  
  123.  
  124.  
  125.  
  126.         <script type="text/javascript">
  127.             var HR = {
  128.                 $: function(i) {
  129.                     return document.getElementById(i)
  130.                 },
  131.                 $$: function(c, p) {
  132. 					return p.getElementsByTagName(c)
  133. 				},
  134. 				ce: function(i, t) {
  135. 					var o = document.createElement(i);
  136. 					t.appendChild(o);
  137. 					return o;
  138. 				}
  139. 			};
  140. 			HR.slider3D = function() {
  141. 				var init = function(o) {
  142. 					this.o = o;
  143. 					var wp = HR.$(o.id),
  144. 						ul = HR.$$('ul', wp)[0],
  145. 						li = this.li = HR.$$('li', ul);
  146. 					this.l = li.length;
  147. 					this.w = wp.offsetWidth;
  148. 					this.h = wp.offsetHeight;
  149. 					this.at = o.auto ? o.auto : 4;
  150. 					var con = this.con = HR.ce('div', wp);
  151. 					con.style.cssText = 'position:absolute;left:0;top:0;width:' + this.w + 'px;height:' + this.h + 'px';
  152. 					ul.style['display'] = 'none';
  153. 					this.a1 = HR.ce('a', con);
  154. 					this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';
  155. 					this.a2 = HR.ce('a', con);
  156. 					this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
  157. 					this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
  158. 					this.img = HR.$$('img', ul);
  159. 					this.s = o.maskSize ? o.maskSize : 5;
  160. 					this.mask11 = HR.ce('span', this.a1);
  161. 					this.mask12 = HR.ce('span', this.a1);
  162. 					this.mask21 = HR.ce('span', this.a2);
  163. 					this.mask22 = HR.ce('span', this.a2);
  164. 					this.pos(0);
  165. 				}
  166. 				init.prototype = {
  167. 					pos: function(i) {
  168. 						clearInterval(this.li[i].a);
  169. 						clearInterval(this.au);
  170. 						this.au = 0;
  171. 						this.cur = i;
  172. 						var navli = HR.$$('li', HR.$(this.o.navId));
  173. 						for (var j = 0; j < navli.length; j++) {
  174. 							navli[j].className = i == j ? 'cur' : '';
  175. 						}
  176. 						var img1 = HR.$$('img', this.a1)[0],
  177. 							img2 = HR.$$('img', this.a2)[0],
  178. 							_this = this;
  179. 						img1.src = i == 0 ? this.img[this.l - 1].src : this.img[i - 1].src;
  180. 						img1.width = this.w;
  181. 						img2.src = this.img[i].src;
  182. 						img2.width = 0;
  183. 						img1.height = img2.height = this.h;
  184. 						this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 ' + this.w / 2 + 'px';
  185. 						this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 ' + this.w / 2 + 'px';
  186. 						this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
  187. 						this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
  188. 						this.li[i].a = setInterval(function() {
  189. 							_this.anim(i)
  190. 						}, 20);   //规定多长时间完成翻转
  191. 					},
  192. 					anim: function(i) {
  193. 						var w1 = HR.$$('img', this.a1)[0].width,
  194. 							w2 = HR.$$('img', this.a2)[0].width;
  195. 						if (w2 == this.w) {
  196. 							clearInterval(this.li[i].a);
  197. 							HR.$$('img', this.a1)[0].width = 0;
  198. 							HR.$$('img', this.a2)[0].width = this.w;
  199. 							this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
  200. 							this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h / this.s + 'px';
  201. 							this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w / 2 + 'px';
  202. 							this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
  203. 						} else {
  204. 							HR.$$('img', this.a1)[0].width -= Math.ceil((this.w - w2) * .13);
  205. 							HR.$$('img', this.a2)[0].width += Math.ceil((this.w - w2) * .13);
  206. 							this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width / 2 + 'px';
  207. 							this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width * this.h / (this.s * this.w) + 'px';
  208. 							this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width / 2 + 'px';
  209. 							this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h / this.s - HR.$$('img', this.a2)[0].width * this.h / (this.s * this.w) + 'px';
  210.                             if (!this.au) this.auto();
  211.                         }
  212.                     },
  213.                     auto: function() {
  214.                         var _this = this;
  215.                         this.au = setInterval(function() {
  216.                             _this.move()
  217.                         }, this.at * 1000);   //翻转频率，看150行
  218.                     },
  219.                     move: function() {
  220.                         var n = this.cur == this.l - 1 ? 0 : this.cur + 1;
  221.                         this.pos(n);
  222.                     }
  223.                 }
  224.                 return init;
  225.             }();
  226.             var mySlider = new HR.slider3D({
  227.                 id: 'slider',
  228.                 maskSize: 6,     //banner图张数
  229.                 navId: 'nav',
  230.                 auto: 1        //设置翻转频率，看150行
  231.             })
  232.         </SCRIPT>
  233.     </body>
  234.  
  235. </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235

这里写图片描述

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>全屏图片切换</title>
  7.         <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  8.         <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
  9.         <script type="text/javascript">
  10.             $(document).ready(function() {
  11.                 $('.flexslider').flexslider({
  12.                     directionNav: true,
  13.                     pauseOnAction: false,
  14.                     animation: "slide",
  15.                     slideshowSpeed: 700
  16.                 });
  17.             });
  18.         </script>
  19.         <style type="text/css">
  20.             * {
  21.                 margin: 0;
  22.                 padding: 0;
  23.                 list-style-type: none;
  24.             }
  25.  
  26.             a,
  27.             img {
  28.                 border: 0;
  29.             }
  30.  
  31.             body {
  32.                 font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
  33.             }
  34.             /* flexslider */
  35.  
  36.             .flexslider {
  37.                 position: relative;
  38.                 height: 400px;
  39.                 width: 100%;
  40.                 overflow: hidden;
  41.                 background: url(img/loading.gif) 50% no-repeat;
  42.                 margin: 0 auto;
  43.             }
  44.  
  45.             .slides {
  46.                 position: relative;
  47.                 z-index: 1;
  48.             }
  49.  
  50.             .slides li {
  51.                 height: 600px;
  52.             }
  53.              .flex-control-nav {
  54.                 position: absolute;
  55.                 bottom: 10px;
  56.                 z-index: 2;
  57.                 width: 100%;
  58.                 text-align: center;
  59.             }
  60.  
  61.             .flex-control-nav li {
  62.                 display: inline-block;
  63.                 width: 14px;
  64.                 height: 14px;
  65.                 margin: 0 5px;
  66.                 *display: inline;
  67.                 zoom: 1;
  68.             }
  69.  
  70.             .flex-control-nav a {
  71.                 display: inline-block;
  72.                 width: 14px;
  73.                 height: 14px;
  74.                 line-height: 40px;
  75.                 overflow: hidden;
  76.                 background: url(img/dot.png) right 0 no-repeat;
  77.                 cursor: pointer;
  78.             }
  79.  
  80.             .flex-control-nav .flex-active {
  81.                 background-position: 0 0;
  82.             }
  83.  
  84.             .flex-direction-nav {
  85.                 position: absolute;
  86.                 z-index: 3;
  87.                 width: 100%;
  88.                 top: 45%;
  89.             }
  90.  
  91.             .flex-direction-nav li a {
  92.                 display: block;
  93.                 width: 50px;
  94.                 height: 50px;
  95.                 overflow: hidden;
  96.                 cursor: pointer;
  97.                 position: absolute;
  98.             }
  99.  
  100.             .flex-direction-nav li a.flex-prev {
  101.                 left: 40px;
  102.                 background: url(img/prev.png) center center no-repeat;
  103.             }
  104.  
  105.             .flex-direction-nav li a.flex-next {
  106.                 right: 40px;
  107.                 background: url(img/next.png) center center no-repeat;
  108.             } 
  109.         </style>
  110.     </head>
  111.  
  112.     <body>
  113.  
  114.         <div style="height:20px;overflow:hidden;">banner图</div>
  115.  
  116.         <div class="flexslider">
  117.             <ul class="slides">
  118.                 <li style="background:url(img/img1.jpg) 50% 0 no-repeat;"></li>
  119.                 <li style="background:url(img/img2.jpg) 50% 0 no-repeat;"></li>
  120.                 <li style="background:url(img/img3.jpg) 50% 0 no-repeat;"></li>
  121.                 <li style="background:url(img/img4.jpg) 50% 0 no-repeat;"></li>
  122.                 <li style="background:url(img/img5.jpg) 50% 0 no-repeat;"></li>
  123.             </ul>
  124.         </div>
  125.         <pre>
  126.  $(window).load(function() {
  127.  $('.flexslider').flexslider({
  128.   animation: "fade",              //String: Select your animation type, "fade" or "slide"                  图片变换方式：淡入淡出或者滑动
  129.   slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"          图片设置为滑动式时的滑动方向：左右或者上下
  130.   slideshow: true,                //Boolean: Animate slider automatically                                  载入页面时，是否自动播放
  131.   slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds         自动播放速度毫秒
  132.   animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds                  动画淡入淡出效果延时
  133.   directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)          是否显示左右控制按钮
  134.   controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage              是否显示控制菜单
  135.   keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys                       键盘左右方向键控制图片滑动
  136.   mousewheel: false,              //Boolean: Allow slider navigating via mousewheel                        鼠标滚轮控制制图片滑动
  137.   prevText: "Previous",           //String: Set the text for the "previous" directionNav item              设置文本的字符串：“以前的”directionnav项目
  138.   nextText: "Next",               //String: Set the text for the "next" directionNav item                   看过《文本字符串：“下”的directionnav item
  139.   pausePlay: false,               //Boolean: Create pause/play dynamic element                              布尔：create暂停/播放动态元素
  140.   pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item                     字符串：设置文字为“暂停”pauseplay项目
  141.   playText: 'Play',               //String: Set the text for the "play" pausePlay item                      字符串：在“玩”pauseplay项设置文本
  142.   randomize: false,               //Boolean: Randomize slide order                                          是否随即幻灯片
  143.   slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置
  144.   animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end            是否循环滚动
  145.   pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.                              布尔：暂停幻灯片的控制要素互动的时候，强烈推荐。
  146.   pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering                         布尔：暂停幻灯片演示当鼠标悬停的滑块，然后恢复时不再徘徊
  147.   controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.                  该导航元素的容器说，这应该是appended太。默认的容器是flexslider元。实例的使用将是“容器”，# .flexslider“容器”，等等。如果没有发现了元素的默认行为，将被考虑。
  148.   manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航
  149.   manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hover
  150.   start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide                                       回调：功能（滑块）-当滑块加载第一个幻灯片时触发
  151.   before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation                              回调：功能（滑块）-与每个滑块动画异步触发
  152.   after: function(){},            //Callback: function(slider) - Fires after each slider animation completes                                  回调：功能（滑块）-每个滑块动画完成后触发
  153.   end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)                  当滑块到达上一个幻灯片（异步）时发生火灾
  154.  });
  155. });
  156.  </pre>
  157.  
  158.     </body>
  159.  
  160. </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160

配置参数

  1.         <pre>
  2.  $(window).load(function() {
  3.  $('.flexslider').flexslider({
  4.   animation: "fade",              //String: Select your animation type, "fade" or "slide"                  图片变换方式：淡入淡出或者滑动
  5.   slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"          图片设置为滑动式时的滑动方向：左右或者上下
  6.   slideshow: true,                //Boolean: Animate slider automatically                                  载入页面时，是否自动播放
  7.   slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds         自动播放速度毫秒
  8.   animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds                  动画淡入淡出效果延时
  9.   directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)          是否显示左右控制按钮
  10.   controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage              是否显示控制菜单
  11.   keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys                       键盘左右方向键控制图片滑动
  12.   mousewheel: false,              //Boolean: Allow slider navigating via mousewheel                        鼠标滚轮控制制图片滑动
  13.   prevText: "Previous",           //String: Set the text for the "previous" directionNav item              设置文本的字符串：“以前的”directionnav项目
  14.   nextText: "Next",               //String: Set the text for the "next" directionNav item                   看过《文本字符串：“下”的directionnav item
  15.   pausePlay: false,               //Boolean: Create pause/play dynamic element                              布尔：create暂停/播放动态元素
  16.   pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item                     字符串：设置文字为“暂停”pauseplay项目
  17.   playText: 'Play',               //String: Set the text for the "play" pausePlay item                      字符串：在“玩”pauseplay项设置文本
  18.   randomize: false,               //Boolean: Randomize slide order                                          是否随即幻灯片
  19.   slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置
  20.   animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end            是否循环滚动
  21.   pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.                              布尔：暂停幻灯片的控制要素互动的时候，强烈推荐。
  22.   pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering                         布尔：暂停幻灯片演示当鼠标悬停的滑块，然后恢复时不再徘徊
  23.   controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.                  该导航元素的容器说，这应该是appended太。默认的容器是flexslider元。实例的使用将是“容器”，# .flexslider“容器”，等等。如果没有发现了元素的默认行为，将被考虑。
  24.   manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航
  25.   manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hover
  26.   start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide                                       回调：功能（滑块）-当滑块加载第一个幻灯片时触发
  27.   before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation                              回调：功能（滑块）-与每个滑块动画异步触发
  28.   after: function(){},            //Callback: function(slider) - Fires after each slider animation completes                                  回调：功能（滑块）-每个滑块动画完成后触发
  29.   end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)                  当滑块到达上一个幻灯片（异步）时发生火灾
  30.  });
  31. });
  32.  </pre>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/834602
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号