聚名网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 320|回复: 0

[dedecms插件] DEDECMS列表模板中应用JS图片左右自动滚动

[复制链接]

31

主题

31

帖子

3099

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3099
发表于 2015-12-29 10:15:19 | 显示全部楼层 |阅读模式
dedecms是非常流行使用的Web管理系统,使用非常广泛。dedecms作为网站管理系统,在使用过程中会遇到与JS特效代码结合使用的情况。那么本教程就是教大家一个在使用dedecms搭建的网站中的栏目页,或者说列表页,使用JS特效代码左右自动滚动图片的效果。在此需要弄明白,JS代码要结合dedecms标签调用在网站列表模板中一起使用。


首先,我们来看一下JS代码图片左右自动滚动效果,效果就如下图所示,要使用如图所示的JS图片左右滚动效果,就要应用到必要的CSS样式、JS代码,dedecms标签调用,然后将这些必要的CSS样式、JS代码添、dedecms标签嵌套在HTML源代码中。接下来我们来看一下具体的步骤,怎么html代码中添加:

JS图片左右自动滚动

第一步:下载CSS样式,添加到html中head标签中,代码效果如下:
  1. <link href="style.css" rel="stylesheet" type="text/css" /> //注意CSS样式表路径
复制代码
第二步:下载JS代码,添加到head标签中,代码效果如下所示:
  1. <script src="ScrollPic.js" language="javascript"></script> //JS文件代码位置根据实际情况而定
复制代码
第三步:在dedecms文章列表模板中嵌套html标签和dedecms标签,代码效果如下:
  1. <!--滚动图片 start-->
  2. <DIV class=rollphotos>
  3. <DIV class=blk_29>
  4. <DIV class=LeftBotton id=LeftArr></DIV>
  5. <DIV class=Cont id=ISL_Cont_1>
  6. <!-- 图片列表 begin -->
  7. {dede:arclist typeid='' row='10'  titlelen='16' type='image'}
  8. <div class=box>[field:imglink /]<br />
  9. <p><a href='[field:arcurl/]'>[field:title/]</a></p></div>
  10. {/dede:arclist}
  11. <!-- 图片列表 end --></DIV>
  12. <DIV class=RightBotton id=RightArr></DIV></DIV>
  13. <SCRIPT language=javascript type=text/javascript>
  14.    <!--//--><![CDATA[//><!--
  15.    var scrollPic_02 = new ScrollPic();
  16.    scrollPic_02.scrollContId   = "ISL_Cont_1"; //内容容器ID
  17.    scrollPic_02.arrLeftId      = "LeftArr";//左箭头ID
  18.    scrollPic_02.arrRightId     = "RightArr"; //右箭头ID

  19.    scrollPic_02.frameWidth     = 615;//显示框宽度
  20.    scrollPic_02.pageWidth      = 152; //翻页宽度

  21.    scrollPic_02.speed          = 10; //移动速度(单位毫秒,越小越快)
  22.    scrollPic_02.space          = 10; //每次移动像素(单位px,越大越快)
  23.    scrollPic_02.autoPlay       = true; //自动播放,false 不自动播放
  24.    scrollPic_02.autoPlayTime   = 3; //自动播放间隔时间(秒)

  25.    scrollPic_02.initialize(); //初始化

  26.    //--><!]]>
  27. </SCRIPT>
  28. </DIV>
  29. <!--滚动图片 end-->
复制代码
代码添加完成后,将网站dedecms列表模板上传到模板目录,更新站点栏目,保证网站中有带图片的文章,也就是文章有缩略图。那么JS代码就会在更新的时候自动调用带有图片的文章,可以实现图片的自动滚动。

本教程所需要样式代码、JS代码下载:下载1

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

随机推荐
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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