设为首页收藏本站

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
DZ起点网_免费Discuz视频教程»首页 › Discuz开发资源 › Discuz导航资源 › JQuery华丽的discuz轮播图 教育门户模板制作视频教程素 ...
12345下一页
返回列表 发新帖
查看: 35932|回复: 43

JQuery华丽的discuz轮播图 教育门户模板制作视频教程素材

 火... [复制链接]
admin
发表于 2014-4-1 17:18:12 | 显示全部楼层 |阅读模式

JQuery华丽的discuz轮播图

效果查看

JQuery华丽的discuz轮播图

JQuery华丽的discuz轮播图

在门户<div class="wp">后面加入以下代码


  1. <div id="lunbotu" class="wp">
  2.     <!--[diy=diylunbotu]--><div id="diylunbotu" class="area"></div><!--[/diy]-->        
  3.         <link rel="stylesheet" href="$_G['style'][styleimgdir]/lunbotu.css" type="text/css" media="screen">
  4.         <script type="text/javascript">
  5.          var jq = jQuery.noConflict();
  6.                 (function() {
  7.                         var LI_WIDTH = [583, 199, 199, 198],
  8.                                 LI_DOM = [jq('.slide_screen li.liA'), jq('.slide_screen li.liB'), jq('.slide_screen li.liC'), jq('.slide_screen li.liD')],
  9.                                 LI_BTN = jq('.slide_screen .libtn'),
  10.                                 COUNT =  3, SPEED = 1000, DISTIM = 6000, LI_COUNT = 4;
  11.                         var cur = 1, next_cur = 2, runid, isclick = true;

  13.                         init();
  14.                         initEvent();

  16.                         runid = setInterval(run, DISTIM);
  17.                         function init() {
  18.                                 LI_BTN.find('li').eq(cur-1).addClass('selected');

  20.                                 for(var i=0; i<LI_COUNT; i++) {
  21.                                         LI_DOM[i].find('.window').css({'top':0, 'left':0, 'position':'absolute'});
  22.                                         LI_DOM[i].find('.window').css('width', LI_WIDTH[i]*COUNT);
  23.                                 }

  25.                         }
  26.                         function initEvent() {
  27.                                 LI_BTN.click(function(ev){
  28.                                         if(isclick && jq(ev.target).attr("_index") !== undefined) {
  29.                                                 isclick = false;
  30.                                                 LI_BTN.find('li').eq(cur-1).removeClass('selected');
  31.                                                 clearInterval(runid);
  32.                                                 runid = null;
  33.                                                 cur = parseInt(jq(ev.target).attr("_index"));
  34.                                                 next_cur = cur + 1;
  35.                                                 LI_BTN.find('li').eq(cur-1).addClass('selected');
  36.                                                 for(var i=0; i<LI_COUNT; i++) {
  37.                                                         LI_DOM[i].find('.window').stop(true,true).animate({"left": -(cur-1)*LI_WIDTH[i]}, SPEED, function(){
  38.                                                                 if(runid===null)runid = setInterval(run, DISTIM);
  39.                                                                 isclick = true;
  40.                                                         });
  41.                                                 }
  42.                                         }
  43.                                 });
  44.                         }
  45.                         function run() {
  46.                                 isclick = false;
  47.                                 LI_BTN.find('li').eq(cur-1).removeClass('selected');
  48.                                 if(cur != COUNT){
  49.                                         for(var i=0; i<LI_COUNT; i++) {
  50.                                                 LI_DOM[i].find('.window').stop(true,true).animate({"left": -(next_cur-1)*LI_WIDTH[i]}, SPEED, function() {
  51.                                                         isclick = true;
  52.                                                 });
  53.                                         }
  54.                                         cur++;
  55.                                         next_cur = cur + 1;
  56.                                 }
  57.                                 else {
  58.                                         for(var i=0; i<LI_COUNT; i++) {
  59.                                                 LI_DOM[i].find('.piece:lt('+(COUNT-1)+')').clone().insertAfter(LI_DOM[i].find('.piece').last());
  60.                                                 LI_DOM[i].find('.piece:lt('+(COUNT-1)+')').remove();
  61.                                                 LI_DOM[i].find('.window').css('left', '0px');

  63.                                                 LI_DOM[i].find('.window').stop(true,true).animate({"left": -LI_WIDTH[i]}, SPEED, function() {
  64.                                                         jq(this).find('.piece').first().clone().insertAfter(jq(this).find('.piece').last());
  65.                                                         jq(this).find('.piece').first().remove();
  66.                                                         jq(this).css('left', '0px');
  67.                                                         isclick = true;
  68.                                                 });
  69.                                         }
  70.                                         cur = 1;
  71.                                         next_cur = cur + 1;
  72.                                 }
  73.                                 LI_BTN.find('li').eq(cur-1).addClass('selected');
  74.                         }
  75.                 })();
  76.         </script>
  77. </div>
复制代码
轮播图CSS.rar (1.11 KB, 下载次数: 1140)

将压缩包里面的lunbotu.css文件上传至当前模板下的扩展图片文件下！


导入DIY模板即可实现本效果！

DIY模板如下


  1. <div class="slide_screen">

  3.         <ul class="clearfix">
  4.                 <li class="liA">
  5.                         <div class="window clearfix" style="top: 0px; left: -583px; position: absolute; width: 1749px;">
  6.                                 
  7.                                 [index=1]
  8.                                 <div class="piece">
  9.                                         <a href="{url}" target="_blank"><img width="583" height="342" src="{pic}" alt="{title}"></a>
  10.                                         <div class="bar">
  11.                                                 <h3>{title}</h3>
  12.                                                 <p>{summary}</p>
  13.                                                 <span></span>
  14.                                                 <a href="{url}" target="_blank"> </a>
  15.                                         </div>
  16.                                 </div>
  17.                                 [/index]
  18.                                 [index=2]
  19.                                 <div class="piece">
  20.                                         <a href="{url}" target="_blank"><img width="583" height="342" src="{pic}" alt="{title}"></a>
  21.                                         <div class="bar">
  22.                                                 <h3>{title}</h3>
  23.                                                 <p>{summary}</p>
  24.                                                 <span></span>
  25.                                                 <a href="{url}" target="_blank"> </a>
  26.                                         </div>
  27.                                 </div>
  28.                                 [/index]
  29.                                 [index=3]
  30.                                 <div class="piece">
  31.                                         <a href="{url}" target="_blank"><img width="583" height="342" src="{pic}" alt="{title}"></a>
  32.                                         <div class="bar">
  33.                                                 <h3>{title}</h3>
  34.                                                 <p>{summary}</p>
  35.                                                 <span></span>
  36.                                                 <a href="{url}" target="_blank"> </a>
  37.                                         </div>
  38.                                 </div>
  39.                                 [/index]
  40.                         </div>
  41.                 </li>
  42.                 <li class="liB">
  43.                         <div class="window clearfix" style="top: 0px; left: -199px; position: absolute; width: 597px;">
  44.                                 
  45.                                 [index=4]
  46.                                 <div class="piece">
  47.                                         <a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
  48.                                         <div class="bar">
  49.                                                 <h3>{title}</h3>
  50.                                                 <p>{summary}</p>
  51.                                                 <span></span>
  52.                                                 <a href="{url}" target="_blank"> </a>
  53.                                         </div>
  54.                                 </div>
  55.                                 [/index]
  56.                                 [index=5]
  57.                                 <div class="piece">
  58.                                         <a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
  59.                                         <div class="bar">
  60.                                                 <h3>{title}</h3>
  61.                                                 <p>{summary}</p>
  62.                                                 <span></span>
  63.                                                 <a href="{url}" target="_blank"> </a>
  64.                                         </div>
  65.                                 </div>
  66.                                 [/index]
  67.                                 [index=6]
  68.                                 <div class="piece">
  69.                                         <a href="{url}" target="_blank"><img width="199" height="168" src="{pic}" alt="{title}"></a>
  70.                                         <div class="bar">
  71.                                                 <h3>{title}</h3>
  72.                                                 <p>{summary}</p>
  73.                                                 <span></span>
  74.                                                 <a href="{url}" target="_blank"> </a>
  75.                                         </div>
  76.                                 </div>
  77.                                 [/index]
  78.                         </div>
  79.                 </li>
  80.                 <li class="liC">
  81.                         <div class="window clearfix" style="top: 0px; left: -199px; position: absolute; width: 597px;">
  82.                                 
  83.                                 [index=7]
  84.                                 <div class="piece">
  85.                                         <a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
  86.                                         <div class="bar">
  87.                                                 <h3>{title}</h3>
  88.                                                 <p>{summary}</p>
  89.                                                 <span></span>
  90.                                                 <a href="{url}" target="_blank"> </a>
  91.                                         </div>
  92.                                 </div>
  93.                                 [/index]
  94.                                 [index=8]
  95.                                 <div class="piece">
  96.                                         <a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
  97.                                         <div class="bar">
  98.                                                 <h3>{title}</h3>
  99.                                                 <p>{summary}</p>
  100.                                                 <span></span>
  101.                                                 <a href="{url}" target="_blank"> </a>
  102.                                         </div>
  103.                                 </div>
  104.                                 [/index]
  105.                                 [index=9]
  106.                                 <div class="piece">
  107.                                         <a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
  108.                                         <div class="bar">
  109.                                                 <h3>{title}</h3>
  110.                                                 <p>{summary}</p>
  111.                                                 <span></span>
  112.                                                 <a href="{url}" target="_blank"> </a>
  113.                                         </div>
  114.                                 </div>
  115.                                 [/index]
  116.                         </div>
  117.                 </li>
  118.                 <li class="liD">
  119.                         <div class="window clearfix" style="top: 0px; left: -198px; position: absolute; width: 594px;">
  120.                                 
  121.                                 [index=10]      
  122.                                 <div class="piece">
  123.                                         <a href="{url}" target="_blank"><img width="198" height="342" src="{pic}" alt="{title}"></a>
  124.                                         <div class="bar">
  125.                                                 <h3>{title}</h3>
  126.                                                 <p>{summary}</p>
  127.                                                 <span></span>
  128.                                                 <a href="{url}" target="_blank"> </a>
  129.                                         </div>            
  130.                                 </div>
  131.                                 [/index]
  132.                                 [index=11]
  133.                                 <div class="piece">
  134.                                         <a href="{url}" target="_blank"><img width="198" height="342" src="{pic}" alt="{title}"></a>
  135.                                         <div class="bar">
  136.                                                 <h3>{title}</h3>
  137.                                                 <p>{summary}</p>
  138.                                                 <span></span>
  139.                                                 <a href="{url}" target="_blank"> </a>
  140.                                         </div>
  141.                                 </div>
  142.                                 [/index]
  143.                                 [index=12]
  144.                                 <div class="piece">
  145.                                         <a href="{url}" target="_blank"><img width="199" height="342" src="{pic}" alt="{title}"></a>
  146.                                         <div class="bar">
  147.                                                 <h3>{title}</h3>
  148.                                                 <p>{summary}</p>
  149.                                                 <span></span>
  150.                                                 <a href="{url}" target="_blank"> </a>
  151.                                         </div>
  152.                                 </div>
  153.                 [/index]                                
  154.                         </div>
  155.                 </li>
  156.         </ul>
  157.         
  158.         <ul class="libtn">
  159.                 <li _index="1" class=""></li>
  160.                 <li _index="2" class="selected"></li>
  161.                 <li _index="3" class=""></li>
  162.         </ul>
  163.         
  164. </div>
复制代码
或者直接导入DIY文件（点击下载）： 轮播图DIY.xml (12.42 KB, 下载次数: 1431)


2015/06/22更新提示：如果出现无法滚动，只用中间一栏，请把教程中的jQuery更新为下面的百度前端库的链接！
  1. http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js
复制代码








discuz, 视频教程, 制作, discuz

相关帖子
回复

使用道具 举报

chenbisong
发表于 2015-4-19 15:46:54 | 显示全部楼层
本帖最后由 chenbisong 于 2015-4-19 15:50 编辑
☆光闪烁 发表于 2014-9-3 15:59
为啥我的轮播图不能左右切换呢？只有中间的那个页面

我也出现类似问题，碰巧解决了。方法如下：
第一步：首先在门户<div class="wp">后面加入以下代码：
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
第二步：然后再按照上文步骤“在门户<div class="wp">后面加入以下代码：”操作，这些代码接着第一步的代码后边添加。其他步骤不变。
我也不知道什么原理，反正我的轮播图现在可以动了。
回复 1 0

使用道具 举报

w442803425
发表于 2015-1-14 03:42:33 | 显示全部楼层
你好  我想要这个透明的图片 可以提供一下嘛？  search.png
回复 0 1

使用道具 举报

puregold
发表于 2014-12-25 18:30:29 | 显示全部楼层
轮播图导入报错
回复 0 1

使用道具 举报

明子
发表于 2014-9-27 13:25:29 | 显示全部楼层
支持一下，感谢楼主分享，支持DZ起点网。
回复 0 1

使用道具 举报

tongjun22
发表于 2014-9-26 15:46:30 | 显示全部楼层
admin 发表于 2014-9-4 00:37
问见上传完毕了没有？检查下

我的也是不动，和7楼的情况一样，文件是按照操作上传的
回复 0 1

使用道具 举报

明子
发表于 2014-9-8 00:22:12 | 显示全部楼层
不错，支持支持
回复 0 1

使用道具 举报

明子
发表于 2014-9-5 07:17:15 | 显示全部楼层
感谢楼主分享
回复 0 1

使用道具 举报

☆光闪烁
发表于 2014-9-4 20:26:06 | 显示全部楼层
admin 发表于 2014-9-4 00:37
问见上传完毕了没有？检查下

检查了，但是还是不行
回复 0 1

使用道具 举报

admin
 楼主| 发表于 2014-9-4 00:37:03 | 显示全部楼层
☆光闪烁 发表于 2014-9-3 15:59
为啥我的轮播图不能左右切换呢？只有中间的那个页面

问见上传完毕了没有？检查下
回复 0 1

使用道具 举报

☆光闪烁
发表于 2014-9-3 15:59:09 | 显示全部楼层
为啥我的轮播图不能左右切换呢？只有中间的那个页面
01.jpg
回复 0 1

使用道具 举报

漳州小猪网
发表于 2014-7-10 09:25:09 | 显示全部楼层
181332i51xvof59arxnxzc.jpg

我的好像比较靠右哦！
回复 0 1

使用道具 举报

admin
 楼主| 发表于 2014-7-10 10:49:45 | 显示全部楼层
漳州小猪网 发表于 2014-7-10 01:25
我的好像比较靠右哦！

检查模板的宽度 DIV的宽度！左浮动有浮动！
回复 0 1

使用道具 举报

漳州小猪网
发表于 2014-7-10 15:57:15 | 显示全部楼层
admin 发表于 2014-7-10 10:49
检查模板的宽度 DIV的宽度！左浮动有浮动！

如何检查模板的宽度呢
回复 0 1

使用道具 举报

admin
 楼主| 发表于 2014-7-10 16:13:05 | 显示全部楼层
漳州小猪网 发表于 2014-7-10 07:57
如何检查模板的宽度呢

最简单的办法就是审查元素比如鼠标移动上去  就会显示宽度！
QQ截图20140710161327.png

这样就显示了一个DIV的宽度！
回复 0 1

使用道具 举报

漳州小猪网
发表于 2014-7-10 20:36:06 | 显示全部楼层
admin 发表于 2014-7-10 16:13
最简单的办法就是审查元素比如鼠标移动上去  就会显示宽度！

我的宽度是958
回复 0 1

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|Discuz代码分析|Discuz目录结构|DZ起点网 ( 蜀ICP备13000518号-15 )

GMT+8, 2024-4-20 07:33 , Processed in 0.063871 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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