首页3D幻灯代码

1. 
   
2. <DIV class=blockcode>
   
3. <BLOCKQUOTE><style>
   
4. .hpicccccccccc ul {margin:0;padding:0}
   
5. .hpicccccccccc{ float:left; overflow:hidden; background-color:#000; padding:3px;}
   
6. .hpicccccccccc li {list-style:none}
   
7. .hpicccccccccc img {border:none;display:block}
   
8. .slide-wp, .hpicccccccccc{ height:438px;}/*幻灯片高，根据你网页需要的大小来调整，不过太小了感觉不到3D效果*/
   
9. .nav-wp, .slide-wp, .hpicccccccccc{ width:450px;}/*幻灯片的宽*/
   
10. .slide-wp {
    
11. overflow: hidden;
    
12. position: absolute;
    
13. }
    
14. .nav-wp {
    
15. position: absolute;
    
16. background: #000;opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);
    
17. margin-top: 322px;/*按钮所在高度随意调整*/
    
18. padding: 0 0 6px 0;
    
19. }
    
20. .nav li {
    
21. float: left;
    
22. margin-left: 10px;
    
23. font-size: 20px;
    
24. font-weight: bold;
    
25. font-family: tahoma;
    
26. color: #22739e;
    
27. cursor: pointer;
    
28. height: 22px;
    
29. }
    
30. .nav li.cur{color: #ff7a00}
    
31. .next { float:right;
    
32. padding: 4px 8px;
    
33. color: #ff7a00;
    
34. height: 20px;
    
35. cursor: pointer;
    
36. }
    
37. </style>
    
38. 
    
39. <div class="hpicccccccccc">
    
40. <div id="slider" class="slide-wp">
    
41. <ul>
    
42. [loop]
    
43. <li><a href="{url}" target="_blank"><img src="{pic}" /></a></li>
    
44. [/loop]
    
45. </ul>
    
46. </div>
    
47. <div class="nav-wp">
    
48. <ul id="nav" class="nav">
    
49. <a class="next" onClick="mySlider.move()"></a>
    
50. <li onClick="mySlider.pos(0)">●</li>
    
51. <li onClick="mySlider.pos(1)">●</li>
    
52. <li onClick="mySlider.pos(2)">●</li>
    
53. <li onClick="mySlider.pos(3)">●</li>
    
54. <li onClick="mySlider.pos(4)">●</li>
    
55. </ul>
    
56. 
    
57. </div>
    
58. </div>
    
59. 
    
60. <script type="text/javascript">
    
61. var HR = {
    
62. $ : function(i) {return document.getElementById(i)},
    
63. $$ : function(c, p) {return p.getElementsByTagName(c)},
    
64. ce : function(i, t) {
    
65. var o = document.createElement(i);
    
66. t.appendChild(o);
    
67. return o;
    
68. }
    
69. };
    
70. HR.slider3D = function () {
    
71. var init = function (o) {
    
72. this.o = o;
    
73. var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
    
74. this.l = li.length;
    
75. this.w = wp.offsetWidth;
    
76. this.h = wp.offsetHeight;
    
77. this.at = o.auto? o.auto : 4;
    
78. var con = this.con = HR.ce('div', wp);
    
79. con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';
    
80. ul.style['display'] = 'none';
    
81. this.a1 = HR.ce('a', con);
    
82. this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';
    
83. this.a2 = HR.ce('a', con);
    
84. this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
    
85. this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
    
86. this.img = HR.$$('img', ul);
    
87. this.s = o.maskSize ? o.maskSize : 5;
    
88. 
    
89. this.mask11 = HR.ce('span', this.a1);
    
90. this.mask12 = HR.ce('span', this.a1);
    
91. this.mask21 = HR.ce('span', this.a2);
    
92. this.mask22 = HR.ce('span', this.a2);
    
93. 
    
94. this.pos(0);
    
95. }
    
96. init.prototype = {
    
97. pos : function (i) {
    
98. clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;
    
99. var navli = HR.$$('li', HR.$(this.o.navId));
    
100. for (var j=0; j<navli.length; j++) {
     
101. navli[j].className = i == j ? 'cur' : '';
     
102. }
     
103. var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
     
104. img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
     
105. img1.width = this.w;
     
106. img2.src = this.img[i].src;
     
107. img2.width = 0;
     
108. img1.height = img2.height = this.h;
     
109. 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';
     
110. 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';
     
111. 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';
     
112. 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';
     
113. this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
     
114. },
     
115. anim : function (i) {
     
116. var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img', this.a2)[0].width;
     
117. if (w2 == this.w) {
     
118. clearInterval(this.li[i].a);
     
119. HR.$$('img', this.a1)[0].width = 0;
     
120. HR.$$('img', this.a2)[0].width = this.w;
     
121. this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
     
122. this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.boderBottomWidth = this.h/this.s + 'px';
     
123. this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.bordrRightWidth = this.w/2 + 'px';
     
124. this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
     
125. }else {
     
126. HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
     
127. HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
     
128. this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.bordightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
     
129. 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';
     
130. this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
     
131. 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';
     
132. if (!this.au) this.auto();
     
133. }
     
134. },
     
135. auto : function () {
     
136. var _this = this;
     
137. this.au = setInterval(function(){_this.move()}, this.at*1000);
     
138. },
     
139. move : function () {
     
140. var n = this.cur==this.l-1 ? 0 : this.cur+1;
     
141. this.pos(n);
     
142. }
     
143. }
     
144. return init;
     
145. }();
     
146. var mySlider = new HR.slider3D({
     
147. id: 'slider',
     
148. maskSize: 6,
     
149. navId: 'nav',
     
150. auto: 4
     
151. })</script>

复制代码

演示网址：http://www.xinjjr.com/trip/  新晋江人 旅游频道

修改的

新手，研究中。。。

超级支持一个！

给力啊

请问下 高和宽哪里设置呢

高和宽看到了！那个边框黑色的怎么设置？

左边边距太宽在哪修改呢？

DIY 提示 标签不匹配