JQuery华丽的discuz轮播图 教育门户模板制作视频教程素材
JQuery华丽的discuz轮播图效果查看在门户<div class="wp">后面加入以下代码
<div id="lunbotu" class="wp">
<!----><div id="diylunbotu" class="area"></div><!---->
<link rel="stylesheet" href="$_G['style']/lunbotu.css" type="text/css" media="screen">
<script type="text/javascript">
var jq = jQuery.noConflict();
(function() {
var LI_WIDTH = ,
LI_DOM = ,
LI_BTN = jq('.slide_screen .libtn'),
COUNT =3, SPEED = 1000, DISTIM = 6000, LI_COUNT = 4;
var cur = 1, next_cur = 2, runid, isclick = true;
init();
initEvent();
runid = setInterval(run, DISTIM);
function init() {
LI_BTN.find('li').eq(cur-1).addClass('selected');
for(var i=0; i<LI_COUNT; i++) {
LI_DOM.find('.window').css({'top':0, 'left':0, 'position':'absolute'});
LI_DOM.find('.window').css('width', LI_WIDTH*COUNT);
}
}
function initEvent() {
LI_BTN.click(function(ev){
if(isclick && jq(ev.target).attr("_index") !== undefined) {
isclick = false;
LI_BTN.find('li').eq(cur-1).removeClass('selected');
clearInterval(runid);
runid = null;
cur = parseInt(jq(ev.target).attr("_index"));
next_cur = cur + 1;
LI_BTN.find('li').eq(cur-1).addClass('selected');
for(var i=0; i<LI_COUNT; i++) {
LI_DOM.find('.window').stop(true,true).animate({"left": -(cur-1)*LI_WIDTH}, SPEED, function(){
if(runid===null)runid = setInterval(run, DISTIM);
isclick = true;
});
}
}
});
}
function run() {
isclick = false;
LI_BTN.find('li').eq(cur-1).removeClass('selected');
if(cur != COUNT){
for(var i=0; i<LI_COUNT; i++) {
LI_DOM.find('.window').stop(true,true).animate({"left": -(next_cur-1)*LI_WIDTH}, SPEED, function() {
isclick = true;
});
}
cur++;
next_cur = cur + 1;
}
else {
for(var i=0; i<LI_COUNT; i++) {
LI_DOM.find('.piece:lt('+(COUNT-1)+')').clone().insertAfter(LI_DOM.find('.piece').last());
LI_DOM.find('.piece:lt('+(COUNT-1)+')').remove();
LI_DOM.find('.window').css('left', '0px');
LI_DOM.find('.window').stop(true,true).animate({"left": -LI_WIDTH}, SPEED, function() {
jq(this).find('.piece').first().clone().insertAfter(jq(this).find('.piece').last());
jq(this).find('.piece').first().remove();
jq(this).css('left', '0px');
isclick = true;
});
}
cur = 1;
next_cur = cur + 1;
}
LI_BTN.find('li').eq(cur-1).addClass('selected');
}
})();
</script>
</div>
将压缩包里面的lunbotu.css文件上传至当前模板下的扩展图片文件下！
导入DIY模板即可实现本效果！DIY模板如下
<div class="slide_screen">
<ul class="clearfix">
<li class="liA">
<div class="window clearfix" style="top: 0px; left: -583px; position: absolute; width: 1749px;">
<div class="piece">
<a href="{url}" target="_blank"><img width="583" height="342" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="583" height="342" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="583" height="342" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
</div>
</li>
<li class="liB">
<div class="window clearfix" style="top: 0px; left: -199px; position: absolute; width: 597px;">
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="168" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
</div>
</li>
<li class="liC">
<div class="window clearfix" style="top: 0px; left: -199px; position: absolute; width: 597px;">
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="169" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
</div>
</li>
<li class="liD">
<div class="window clearfix" style="top: 0px; left: -198px; position: absolute; width: 594px;">
<div class="piece">
<a href="{url}" target="_blank"><img width="198" height="342" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="198" height="342" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
<div class="piece">
<a href="{url}" target="_blank"><img width="199" height="342" src="{pic}" alt="{title}"></a>
<div class="bar">
<h3>{title}</h3>
<p>{summary}</p>
<span></span>
<a href="{url}" target="_blank"> </a>
</div>
</div>
</div>
</li>
</ul>
<ul class="libtn">
<li _index="1" class=""></li>
<li _index="2" class="selected"></li>
<li _index="3" class=""></li>
</ul>
</div>或者直接导入DIY文件（点击下载）：
2015/06/22更新提示：如果出现无法滚动，只用中间一栏，请把教程中的jQuery更新为下面的百度前端库的链接！
http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js
本帖最后由 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">后面加入以下代码：”操作，这些代码接着第一步的代码后边添加。其他步骤不变。
我也不知道什么原理，反正我的轮播图现在可以动了。
你好我想要这个透明的图片 可以提供一下嘛？search.png 轮播图导入报错 支持一下，感谢楼主分享，支持DZ起点网。 admin 发表于 2014-9-4 00:37
问见上传完毕了没有？检查下
我的也是不动，和7楼的情况一样，文件是按照操作上传的 不错，支持支持 感谢楼主分享 :) admin 发表于 2014-9-4 00:37
问见上传完毕了没有？检查下
检查了，但是还是不行 ☆光闪烁 发表于 2014-9-3 15:59
为啥我的轮播图不能左右切换呢？只有中间的那个页面
问见上传完毕了没有？检查下 为啥我的轮播图不能左右切换呢？只有中间的那个页面
我的好像比较靠右哦！
漳州小猪网 发表于 2014-7-10 01:25
我的好像比较靠右哦！
检查模板的宽度 DIV的宽度！左浮动有浮动！ admin 发表于 2014-7-10 10:49
检查模板的宽度 DIV的宽度！左浮动有浮动！
如何检查模板的宽度呢 漳州小猪网 发表于 2014-7-10 07:57
如何检查模板的宽度呢
最简单的办法就是审查元素比如鼠标移动上去就会显示宽度！
这样就显示了一个DIV的宽度！
admin 发表于 2014-7-10 16:13
最简单的办法就是审查元素比如鼠标移动上去就会显示宽度！
我的宽度是958