医院网站建设

当前位置: > 医院网站改版 >

使用TouchSlide定时显示幻灯片并隐藏分页

发布时间:2019-05-04 作者:医院网站建设 关键词: TouchSlide
在我们做网站运营的时候,经常需要临时上活动,打个比方突然有个专家或者老师到访,网站需要提前做宣传,当这个专家或者老师回去的时候,需要将网站上所有的专题和页面上有关这个老师来院的宣传素材统一下线掉。
如果您没有采用我今天讲的方法,恐怕每次都要耗费很长的时间修改。
我们建设医疗网站主要采用dedecms,利用dedecms里面自带的广告系统我们可以实现宣传内容自动下线的功能。
首先第一步添加广告,我们在广告系统里添加了如下代码
<li>
<a class="pic" href="javascript:void(0)" onclick="openZoosUrl();return false;"><img src="/zhuanti/lb/images/sgz02.jpg" width="100%" /></a>
</li>
并设置了展示时间,过期之后这张宣传图片将会自动隐藏不显示出来了。
使用TouchSlide定时显示幻灯片并隐藏分页

现在要修改模板文件中的调用
加粗的部分就是我们刚刚添加到广告系统中的代码的调用方法 

<section class="article-content">
<div id="slideBox_bns" class="slideBox_bns">
<div class="bd">
<ul>
{dede:myad name='huangdeng1'/}
<li>
<a class="pic" href="javascript:void(0)" onclick="openZoosUrl('chatwin','&amp;e=');return false;"><img src="{dede:field.litpic/}" width="100%" /></a>
</li>
</ul>
</div>
<div class="hd">
<ul></ul>
</div>
</div>
<script type="text/javascript">
TouchSlide({
slideCell:"#slideBox_bns",
titCell:".hd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"leftLoop",
autoPlay:true,
delayTime:2000,//每隔2s翻页一次
interTime:5000,
autoPage:true //自动分页
});
</script>

您可以直接粘贴过去即可使用。
但是这样会有一个问题,就是在只有一张图片的时候,幻灯片仍然每隔两秒切换一次,就像一个人明明只有一张百元钞,还一个劲儿的抖啊抖啊的。
这样很影响视觉效果,有没有办法通过直接改属性解决呢?我翻看了所有TouchSlide官网的案例,也没有找到相关的方法,所以只有我们自己在js里做判断。
判断的逻辑是如果TouchSlide所在的ul中只有一个li的情况下则不播放幻灯片,也不显示翻页的小圆点图片,超过1张图片的时候再自动切换幻灯片,并显示小翻页的小圆点图片
我们在js代码的第一行添加这句代码
var itemautoplay = ($('.bd ul li').length>1)?true:false;
再将autoPlay和autoPage的属性值改成itemautoplay。
重新生成一下页面,然后就实现了我们刚才想要的需求。
因为篇幅有限,省略了css样式,如果您有相关问题,可以登录www.mediab.cn随时咨询我
 
责任编辑:医院网站建设
医院网站改版