添加滚动功能 jcarousellite dedecms

参考:http://baike.baidu.com/view/3904801.htm

参考:http://blog.csdn.net/lee576/article/details/3168106

环境:win7 apmserv5.2.6 dedecms5.7sp1 GBK版本

由于我维护我们实验室的网站,我师兄发了信息“我在这里多加了几张图片,但是它不滚动你看看能不能解决”。以前我也没做过网站,但是现在得解决这个问题。由于之前看了“A5官方dedecms织梦建站初级培训”,有了一些基础,想要看视频的朋友请查看链接(http://blog.csdn.net/kupe87826/article/details/7760360)。

因为是在首页嘛,我就得查看它的首页模板Index.htm,在模板-》默认模板管理下,找到index.htm,选择后面的编辑命令,出现一大堆代码,我晕了。我此时淡定了一下,想改这个问题应该在关于java script的地方修改,从上到下查看了一下index.htm,发现最后有两处很像我想要修改的代码。

第一处:

<script type="text/javascript">

$(document).ready(function(){

$(‘#flashbox’).smallslider({

onImageStop:false,

switchEase: ‘easeOutBounce’,

switchPath: ‘left’,

switchMode: ‘hover’,

textSwitch:2,

textPosition: ‘top’,

textAlign:’center’,

showText:false

});

});

</script>

第二处:

<script type="text/javascript">

$(function() {

$(".imgBox .inner").jCarouselLite({

btnNext: ".imgBox .prev",

btnPrev: ".imgBox .next",

visible:5

});

});

</script>

网站上也确实有另有一处图片滚动的地方,那么哪处是我要找的地方呢?我看了一下

“btnNext: ".imgBox .prev", btnPrev: ".imgBox .next",”猜想第二处应该就是我要修改的代码,因为如下图:

好了,代码找到了,现在就是如何修改了,jCarouselLite有点像函数调用,不管了百度一下。百科名片

jcarousellite是一款jquery插件,可以控制文档元素滚动,丰富的参数设置可以控制滚动的更多细节,是一款不可多得的滚动插件,使用非常方便,目前支持jquery1.2和以上版本。

当前版本

最新版本是 1.0.1 ,有完整( (Uncompressed),压缩( (Minified),打包(Packed)3个版本提供下载。

Index.htm开头有几句是这样的

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript" src="js/jquery.smallslider.js"></script>

<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>

参数说明

  btnPrev string上一个按钮的选择器,比如 btnPrev: ".prev"

  btnNext string下一个按钮的选择器,比如 btnNext: ".next"

  btnGo array自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮:[".1", ".2"]

  mouseWheel bool鼠标滑是否可以轮控制上下滚动,可选:false,true,默认false

  auto int指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000

  speed int滑动的速度,可以尝试800 1000 1500,设置成0将删除效果

  easing string缓冲效果名称,如:easing: "bounceout",需要jquery中的easing pluin(缓冲插件实现),只适用于jq1.2

  vertical bool是否垂直滚动,可选:false,true,默认false

  circular bool是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动

  visible int可见数量,可以为小数,如2.5为2.5个li

  start int开始的地方,默认是0

  scroll int每次滚动的li数量

  beforeStart func滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert("开始的对象是:" + a)}

  afterEnd func 滚动结束时回调的函数,使用方法同上

哈哈,看来我这个网站是用最新版本做的,一定支持滚动了!但是这么多参数怎么设置呢,看来还是得向网上的前辈请教了,看看他们是怎么用的,继续百度了。

在http://blog.csdn.net/lee576/article/details/3168106发现了这样的代码$(".carousel").jCarouselLite({ auto:800, speed:1000 });

那我也把这个代码加上试试吧,将第二处改成

<script type="text/javascript">

$(function() {

$(".imgBox .inner").jCarouselLite({

btnNext: ".imgBox .prev",

btnPrev: ".imgBox .next",

auto:800,

speed:1000,

visible:5

});

});

</script>

使用生成-》更新系统缓存,生成-》一键更新网站功能,进行网站更新。

F5一下,哈哈,成功了!

Smallslider也是一个很强大的插件,有兴趣朋友可以看看。

参考:http://baike.baidu.com/view/3904801.htm

参考:http://blog.csdn.net/lee576/article/details/3168106

成功是什么?就是走过了所有通向失败的路.只剩下一条路.那就是成功的路.

添加滚动功能  jcarousellite dedecms

相关文章:

你感兴趣的文章:

标签云: