DZ图片幻灯 帖子图片列表左右滚动 模块模板 纯DIY可用-Discuz教程下载

登录/ 注册
站长工具
搜索

DZ图片幻灯 帖子图片列表左右滚动 模块模板 纯DIY可用

来自版块: Discuz教程 发表于: 2015-7-27 10:21:23
47016
如本资源下载地址失效,请点击此处进行反馈
dz图片幻灯 帖子图片列表左右滚动 模块模板 纯DIY，效果图：

DZ图片幻灯 帖子图片列表左右滚动 模块模板 纯DIY可用

DZ图片幻灯 帖子图片列表左右滚动 模块模板 纯DIY可用


分两个版本：

第一个需要根据不同的宽高调整代码
使用方法（以帖子内容页做说明，实际你可以任意添加到各种页面各种框架）：

1.进入帖子内容页DIY模式添加3:1框架
2.给两个框架分别添加一个帖子模块，第一个帖子模块调用数据（附件模式，建议图片宽度158*200）建议4-10条，标题20字节，第二个建议8条数据
3.给框架，模块设置样式为无边框且无边距
4.分别将以下代码添加到对应的模块自定义样式中
图片列表：
  1. <style type="text/CSS">
  2. .bbf_slide_lr_1 {
  3.         margin-bottom:10px;
  4.     padding: 5px 35px;
  5.     position: relative;
  6.     border:1px solid #ccc;
  7.     border-right:none;
  8.     border-radius:5px;
  9. }
  10. ul.slideshow li {
  11.     float: left;
  12.     overflow: hidden;
  13.     padding: 0 3px;
  14.     text-align: center;
  15. }
  16. ul.slideshow li a{ display:block;}
  17. .slidebarbtn {
  18.     display: block;
  19.     font-family: Geneva,sans-serif;
  20.     font-size: 36px;
  21.     height: 80px;
  22.     line-height: 80px;
  23.     position: absolute;
  24.     text-align: center;
  25.     width: 28px;
  26. }

  28. .slidebarbtn:hover {
  29.     text-decoration: none;
  30. }
  31. .slidebarbtn {
  32.     background: none repeat scroll 0 0 #f2f2f2;
  33.     border: 1px solid #cdcdcd;
  34.     color: #333;
  35.         border-radius: 5px;
  36. }
  37. .slidebarbtn:hover {
  38.     background: none repeat scroll 0 0 #fcc9a4;
  39.     border: 1px solid #cdcdcd;
  40.     color: #fff;
  41. }
  42. .slidebarup {
  43.     left: 5px;
  44.     top: 66px;
  45. }
  46. .slidebardown {
  47.     right: 5px;
  48.     top: 66px;
  49. }
  50.         
  51. .bbf_slide_lr_1  span,.bbf_slide_lr_1 em  { position:absolute; left:3px; bottom:0; height:40px ; text-indent:5px; line-height:40px; font-size:16px;  color:#000; overflow:hidden; }
  52. .ie_all .bbf_slide_lr_1 span, .ie_all .bbf_slide_lr_1 em  { bottom:0px; }
  53. .bbf_slide_lr_1  span { background-color:#fff; opacity:.4;filter:alpha(opacity=40); }
  54. .bbf_slide_lr_1  a:hover span { background-color:#000; }
  55. .bbf_slide_lr_1  li:hover em { color:#fff; text-decoration:none; }
  56. .bbf_slide_lr_1  em:hover { color:#fff; text-decoration:none; }
  57.         
  58. </style>
  59. <div class="slidebox bbf_slide_lr_1" slidenum="4" slidestep="3" > <!--4个，每次滚动3个-->
  60. <a class="slidebarbtn leftbtn slidebarup" mevent="click" href="javascript:void(0);"> <</a>
  61. <div class="middle cl" >
  62.         <ul class="slideshow">
  63.         [loop]
  64.         <li style="width: {picwidth}px;">
  65.     <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /> <span></span><em style="width:{picwidth}px;">{title}</em> </a>
  66.     </li>
  67.     [/loop]
  68.     </ul>
  69. </div>
  70. <a class="slidebarbtn rightbtn slidebardown" mevent="click" href="javascript:void(0);">> </a>
  71. </div>

  73. <script type="text/javascript">
  74. runslideshow();
  75. </script>
复制代码
帖子列表：
  1. <style type="text/css">
  2. .bbf_threadlist_26_16 { position: relative; border: 1px solid #ccc; border-left: none; border-radius: 5px; padding: 0px 5px; }
  3. .bbf_threadlist_26_16 em { position: absolute; right: 0; }
  4. .bbf_threadlist_26_16 li { height: 24px; overflow: hidden; }
  5. .bbf_threadlist_26_16 a.forum { color: #f60; font-size: 16px; }
  6. .bbf_threadlist_26_16 a.thread { height:24px; line-height: 26px; font-size:16px; }
  7. </style>
  8. <div class="module cl xl bbf_threadlist_26_16">
  9.         <ul>
  10.                 [loop]
  11.                 <li><a class="forum" href="{forumurl}"> {forumname} | </a> <a class="thread" href="{url}" title="{title}"{target}>{title}</a></li>
  12.                 [/loop]
  13.         </ul>
  14. </div>
复制代码
图片列表：
  1. <style type="text/css">
  2. .bbf_slide_lr_1 {
  3.         margin-bottom: 10px;
  4.     padding: 5px 35px;
  5.     position: relative;
  6.     border: 1px solid #ccc;
  7.     border-right: none;
  8.     border-radius: 5px;
  9. }
  10. .bbf_slide_lr_1 li {
  11.     float: left;
  12.     overflow: hidden;
  13.     padding: 0 3px;
  14.     text-align: center;
  15. }
  16. .bbf_slide_lr_1 li a {
  17.         display: block;
  18. }
  19. .bbf_slide_lr_1 .slidebarbtn {
  20.     display: block;
  21.     font-family: Geneva,sans-serif;
  22.     font-size: 36px;
  23.     height: 80px;
  24.     line-height: 80px;
  25.     position: absolute;
  26.     text-align: center;
  27.     width: 28px;
  28.     background: none repeat scroll 0 0 #f2f2f2;
  29.     border: 1px solid #cdcdcd;
  30.     color: #333;
  31.         border-radius: 5px;
  32. }
  33. .bbf_slide_lr_1 .slidebarbtn:hover {
  34.     text-decoration: none;
  35. }
  36. .bbf_slide_lr_1 .slidebarbtn:hover {
  37.     background: none repeat scroll 0 0 #fcc9a4;
  38.     border: 1px solid #cdcdcd;
  39.     color: #fff;
  40. }
  41. .bbf_slide_lr_1 .slidebarup {
  42.     left: 5px;
  43.     top: 66px;
  44. }
  45. .bbf_slide_lr_1 .slidebardown {
  46.     right: 5px;
  47.     top: 66px;
  48. }        
  49. .bbf_slide_lr_1 em {
  50.         position: absolute;
  51.         left: 3px;
  52.         bottom: 0;
  53.         height: 40px;
  54.         text-indent: 5px;
  55.         line-height: 40px;
  56.         font-size: 16px;  
  57.         color: #000;
  58.         overflow: hidden;
  59.         background-color: #fff;
  60.         opacity: .4;filter:alpha(opacity=40);
  61. }
  62. .bbf_slide_lr_1 a:hover em {
  63.         background-color: #000;
  64. }
  65. .bbf_slide_lr_1 li:hover em {
  66.         color: #fff;
  67.         text-decoration: none;
  68. }
  69. </style>

  71. <div class="slidebox bbf_slide_lr_1" slidenum="4" slidestep="3" >  <!--4个，每次滚动3个-->
  72. <a class="slidebarbtn leftbtn slidebarup" mevent="click" href="javascript:void(0);"> <</a>
  73. <div class="middle cl" >
  74.         <ul class="slideshow">
  75.         [loop]
  76.         <li style="width: {picwidth}px;">
  77.     <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /><em>{title}</em> </a>
  78.     </li>
  79.     [/loop]
  80.         [index=1]
  81.         <li style="width: {picwidth}px;">
  82.         <style type="text/css">
  83.         .slidebarup,.slidebardown {top:top:calc({picheight}px/2 - 35px);top:-moz-calc({picheight}px/2 - 35px);top:-webkit-calc({picheight}px/2 - 35px);}
  84.         .bbf_slide_lr_1 em {width:{picwidth}px;}
  85.         </style>
  86.         <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /><em>{title}</em></a>
  87.         </li>
  88.         [/index]
  89.     </ul>
  90. </div>
  91. <a class="slidebarbtn rightbtn slidebardown" mevent="click" href="javascript:void(0);">> </a>
  92. </div>

  94. <script type="text/javascript">
  95. runslideshow();
  96. </script>
复制代码
帖子列表（和版本一的一样）：
游客，如果您要查看本帖隐藏内容请回复

图片，左右

举报

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

©2015-2022 tuyuanma.com版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com联系QQ：3197813386

返回顶部