Discuz教程网

1314学习网»站长论坛 › discuz资源中心 › discuz教程 › discuz建站教程 › Discuz X2 首页轮幻缩略图，焦点图，幻灯片，JS+css源 ...
返回列表 发新帖

Discuz X2 首页轮幻缩略图，焦点图，幻灯片，JS+css源码及安装使用教

  [复制链接]
authicon dly 发表于 2011-6-24 12:53:00 | 显示全部楼层 |阅读模式
1.将下载的FLV文件夹上传到论坛使用的模板的根目录；
2.将在后台新建一个模块模板。命名为“门户首页百变幻灯片”；复制下列代码

  1. <div id="focus_change">
  2. <div id="focus_change_list" style="top:0; left:0;">
  3. <ul>
  4. [loop]
  5. <li>
  6. <div class="img_item">
  7. <div><a href="{url}" target="_blank"><img src="{pic}"></a></div>
  8. <div class="desc">
  9. <h5><a href="1.jpg" target="_blank">{title}</a></h5>
  10. </div>
  11. </div>
  12. </li>
  13. [/loop]
  14. </ul>
  15. </div>
  16. <div class="focus_change_opacity"></div>
  17. <div class="focus_change_opacity1"></div>
  18. <div id="focus_change_btn">
  19. <ul>
  20. [loop]<li><a href="{url}"><img src="{pic}" /></a></li>[/loop]
  21. </ul>
  22. </div>
  23. </div>
复制代码
3.模块管理-数据调用-增加数据调用-模块分类（帖子模块）-模块标识 （门户首页百变幻灯片）-显示样式（门户首页百变幻灯片）

4.内部调用 将这样<!--{block/677}-->像似的代码放到你的首页幻灯片位置


5.并将以下代码放到<head>.....</head>之间；
  1. <script type="text/javascript">
  2. function $(id) { return document.getElementById(id); }
  3. function moveElement(elementID,final_x,final_y,interval) {
  4. if (!document.getElementById) return false;
  5. if (!document.getElementById(elementID)) return false;
  6. var elem = document.getElementById(elementID);
  7. if (elem.movement) {
  8. clearTimeout(elem.movement);
  9. }
  10. if (!elem.style.left) {
  11. elem.style.left = "0px";
  12. }
  13. if (!elem.style.top) {
  14. elem.style.top = "0px";
  15. }
  16. var xpos = parseInt(elem.style.left);
  17. var ypos = parseInt(elem.style.top);
  18. if (xpos == final_x && ypos == final_y) {
  19. return true;
  20. }
  21. if (xpos < final_x) {
  22. var dist = Math.ceil((final_x - xpos)/10);
  23. xpos = xpos + dist;
  24. }
  25. if (xpos > final_x) {
  26. var dist = Math.ceil((xpos - final_x)/10);
  27. xpos = xpos - dist;
  28. }
  29. if (ypos < final_y) {
  30. var dist = Math.ceil((final_y - ypos)/10);
  31. ypos = ypos + dist;
  32. }
  33. if (ypos > final_y) {
  34. var dist = Math.ceil((ypos - final_y)/10);
  35. ypos = ypos - dist;
  36. }
  37. elem.style.left = xpos + "px";
  38. elem.style.top = ypos + "px";
  39. var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  40. elem.movement = setTimeout(repeat,interval);
  41. }
  42. function classNormal(){
  43. var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
  44. for(var i=0; i<focusBtnList.length; i++) {
  45. focusBtnList[i].className='';
  46. }
  47. }
  48. function focusChange() {
  49. var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
  50. focusBtnList[0].onmouseover = function() {
  51. moveElement('focus_change_list',0,0,5);
  52. classNormal()
  53. focusBtnList[0].className='current'
  54. }
  55. focusBtnList[1].onmouseover = function() {
  56. moveElement('focus_change_list',-320,0,5);
  57. classNormal()
  58. focusBtnList[1].className='current'
  59. }
  60. focusBtnList[2].onmouseover = function() {
  61. moveElement('focus_change_list',-640,0,5);
  62. classNormal()
  63. focusBtnList[2].className='current'
  64. }
  65. focusBtnList[3].onmouseover = function() {
  66. moveElement('focus_change_list',-960,0,5);
  67. classNormal()
  68. focusBtnList[3].className='current'
  69. }
  70. }
  71. setInterval('autoFocusChange()', 5000);
  72. var atuokey = false;
  73. function autoFocusChange() {
  74. $('focus_change').onmouseover = function(){atuokey = true}
  75. $('focus_change').onmouseout = function(){atuokey = false}
  76. if(atuokey) return;
  77. var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
  78. for(var i=0; i<focusBtnList.length; i++) {
  79. if (focusBtnList[i].className == 'current') {
  80. var currentNum = i;
  81. }
  82. }
  83. if (currentNum==0 ){
  84. moveElement('focus_change_list',-320,0,5);
  85. classNormal()
  86. focusBtnList[1].className='current'
  87. }
  88. if (currentNum==1 ){
  89. moveElement('focus_change_list',-640,0,5);
  90. classNormal()
  91. focusBtnList[2].className='current'
  92. }
  93. if (currentNum==2 ){
  94. moveElement('focus_change_list',-960,0,5);
  95. classNormal()
  96. focusBtnList[3].className='current'
  97. }
  98. if (currentNum==3 ){
  99. moveElement('focus_change_list',0,0,5);
  100. classNormal()
  101. focusBtnList[0].className='current'
  102. }
  103. }
  104. function autoFocusChange() {
  105. $('focus_change').onmouseover = function(){atuokey = true}
  106. $('focus_change').onmouseout = function(){atuokey = false}
  107. if(atuokey) return;
  108. var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
  109. for(var i=0; i<focusBtnList.length; i++) {
  110. if (focusBtnList[i].className == 'current') {
  111. var currentNum = i;
  112. }
  113. }
  114. if (currentNum==0 ){
  115. moveElement('focus_change_list',-320,0,5);
  116. classNormal()
  117. focusBtnList[1].className='current'
  118. focusBtnList[1].className='focus_change_btn1'
  119. }
  120. if (currentNum==1 ){
  121. moveElement('focus_change_list',-640,0,5);
  122. classNormal()
  123. focusBtnList[2].className='current'
  124. }
  125. if (currentNum==2 ){
  126. moveElement('focus_change_list',-960,0,5);
  127. classNormal()
  128. focusBtnList[3].className='current'
  129. }
  130. if (currentNum==3 ){
  131. moveElement('focus_change_list',0,0,5);
  132. classNormal()
  133. focusBtnList[0].className='current'
  134. }
  135. }
  136. </script>
  137. <style type="text/css">
  138. /* Reset style */
  139. * { margin:0; padding:0; word-break:break-all; }
  140. body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
  141. h1, h2, h3, h4, h5, h6 { font-size:1em; }
  142. a { color:#039; text-decoration:none; }
  143. a:hover { text-decoration:underline; }
  144. ul, li { list-style:none; }
  145. fieldset, img { border:none; }
  146. em, strong, cite, th { font-style:normal; font-weight:normal; }
  147. /* Focus_change style */
  148. #focus_change { position:relative; width:320px; height:400px; overflow:hidden; margin:20px 0 1px 60px; }
  149. #focus_change_list { position:absolute; width:1800px; height:330px; }
  150. #focus_change_list li { float:left; }
  151. #focus_change_list li img { width:320px; height:330px; }

  153. .focus_change_opacity { position:absolute; width:320px; height:80px; top:330px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
  154. .focus_change_opacity1 { position:absolute; width:320px; height:30px; top:290px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
  155. #focus_change_btn { position:absolute; width:320px; height:65px; top:318px;}
  156. #focus_change_btn ul { padding-left:3px; }
  157. #focus_change_btn li { display:inline; float:left; margin:0 1px; padding-top:12px; }
  158. #focus_change_btn li a img { width:72px; height:65px; border:2px solid #888; }
  159. #focus_change_btn li a img span{ float:left; padding-top:12px;}
  160. #focus_change_btn .current { background:url(6C164133877.gif) no-repeat 37px 8px;}
  161. #focus_change_btn .current img { border-color:#EEE; }

  163. .img_item{float:left;width:320px;position:relative;}
  164. .img_item img{ width:320px; height:330px; }
  165. .desc{z-index:10; float:left;width:320px;color:#fff;position:absolute;top:295px;}
  166. .desc a{color:#fff;}
  167. .desc H5{font-SIZE:18px; padding-left:10px}
  168. </style>
复制代码

附件下载：
游客，如果您要查看本帖隐藏内容请回复



模板



上一篇：解决Sky在全新安装的discuz X2中无法回复的问题
下一篇：让Discuz X2版块规则，支持HTML

相关帖子
回复

举报

authicon 大学生联谊社区 发表于 2011-6-25 01:39:57 | 显示全部楼层
演示呢 ？、、、、
回复

举报

authicon NicoleOnly 发表于 2011-6-26 04:59:39 | 显示全部楼层
支持!好东西，拿走了！
回复

举报

authicon fantuanzi 发表于 2011-6-27 09:59:59 | 显示全部楼层
不错，我喜欢
回复

举报

authicon jerry 发表于 2011-6-28 00:05:17 | 显示全部楼层
看道破 不错啊
回复

举报

authicon melody0721 发表于 2011-6-29 20:30:14 | 显示全部楼层
好东西，要下来看看
回复

举报

authicon qqoxygen 发表于 2011-6-30 07:30:10 | 显示全部楼层
看一下啊，嘻嘻
回复

举报

authicon NicoleOnly 发表于 2011-6-30 10:29:59 | 显示全部楼层
真的有意思！
回复

举报

authicon lanyuqing 发表于 2011-6-30 20:29:49 | 显示全部楼层
顶顶更健康
回复

举报

authicon 计晨 发表于 2011-6-30 21:29:58 | 显示全部楼层
不错，谢谢分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2024-4-29 18:59

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表