门户首页幻灯片相关问题

我这是在论坛找的一个3D的幻灯片代码，效果还行，可是最后发现一个问题，就是我点击图片居然没有连接，请问怎么办？~！！

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>

复制代码

麻烦大家个帮忙看看，或者谁有比较好的幻灯代码给传个呗~！！{:soso_e154:}在线等回复。、、、、、、

我这里有一套自己封装的，要的话给你

briskvoice 发表于 2012-9-10 16:05
我这里有一套自己封装的，要的话给你

你这种的我也看了好多，可就是不会用啊。。。。。。

你这个幻灯效果不错，自己修改一下添加链接就是了

fashion90s 发表于 2012-9-10 23:41
你这个幻灯效果不错，自己修改一下添加链接就是了

就是不知道怎么加啊。。。。。这代码这么多，有点~~~会的帮帮忙呗

我一个金币都没有

能直接显示 文件夹中的图片  不是帖子里的  求大神……