【今日更新3D幻灯】DZ百变幻灯 每天更新一款幻灯，今日更新3D幻灯

给力 不给力就没力做事老

我不知道，我能更新到到少款幻灯，有空就来，没空就不来。先来一款，昨天我也发过一款，现在再来。
追求以最傻瓜的形式给出代码，力求降低用户使用成本。最好都是复制代码就能用，目前都可以是复制代码都能用，但我不知道以后会写什么咚咚，所以不知道能不能傻瓜式。



使用详细方法见9楼https://discuz.dismall.com/forum.php?mod=redirect&goto=findpost&ptid=2540975&pid=22459612


效果定做，请给我们留言，不用注册即可留言，收到有空了就做，http://www.admincg.com/tx/e/tool/feedback/?bid=6


1：这个幻灯的代码地址：http://www.admincg.com/thread-2482-1-1.html


你对你的空间商满意 吗？你网站速度怎么样？来，给你的空间投一票，让我们看看哪家空间最好。
点击免注册投票http://www.admincg.com/IDCtouPiao/

废话不说，直接来代码了。复制下面代码即可使用， 后台门户 模块模板那些东西，请参考相关帖子，这里不说怎么调用了。

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

复制代码

这里也不解答任何问题，没有那么多时间。要工作的，

如复制代码不可用，可能有些空格符号什么的变了，请下载源文件，用DW打开文档，就可以获得精准代码了。
源文件下载和演示地址：http://www.admincg.com/tx/huandengshichuang/20111201/194.html
有问题，高级修改方法，请到草根论坛发帖留言http://www.admincg.com
使用实例http://www.5200760.com

强哥地板www.qz5156.com

【今日更新3D幻灯】更多的，现在美丽了，等大家给力才有力做{:soso_e102:}

不错的贴，顶一下吧

很偏凉

好吧，说详细的使用方法，哎，这些帖子都很多多，看图你就懂了。

调用帖子，比附包含图片。显示数量要和代码相等，显示太多了，可能会变形

不知道啊，不知道。     http://www.c9c9gua.com