现在的位置: 首页 > dedecms优化 > 正文

DEDECM模板循环滚动图片制作

2014年01月23日 dedecms优化 ⁄ 共 2154字 ⁄ 字号 暂无评论 ⁄ 阅读 1 次

DEDECM模板循环滚动图片制作 ,最近黑雨一直在研究dedecms模板制作,在做滚动图片的时候,遇到了一点问题,下面是在网上找到的一些滚动图片代码,做个记录。

方法一:

HTML代码如下:

<div id="demo">

<div id="indemo">

<div id="demo1">
<ul>{dede:arclist row=10 orderby=pubdate type='image.' imgwidth='158' imgheight='110'}
<li><a href="[field:arcurl/]">[field:image/]<span class="title">[field:title/]</span></a></li>{/dede:arclist}</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

CSS样式如下:

#demo {width:970px;margin:0 10px;background:#FFF;overflow:hidden;}
#indemo {float:left;width: 800%;}
#demo1 {float:left;}
#demo2 {float:left;}
#demo ul li {width:160px;height:130px;float:left;margin:10px 5px 0 5px;display:block;text-align:center;}
#demo ul li a {line-height:30px;}
#demo ul li:hover {text-decoration:underline;}

方法二:

第一步:找到图文资讯代码的位置

<marquee align=middle direction=right scrollamount=1.5 scrolldelay=3 behavior="alternate">

代码插入

{dede:arclist row=5 titlelen=20 orderby=pubdate type='image.' imgwidth='152' imgheight='98' typeid='11' }

的前面即

<marquee align=center direction=right scrollamount=1.5 scrolldelay=3 valign=middle behavior="alternate">
{dede:arclist row=5 titlelen=20 orderby=pubdate type='image.' imgwidth='152' imgheight='98' typeid='11' }

第二步:

将</marquee>插入{/dede:arclist}的后面即可实现滚动
即:{/dede:arclist}</marquee>

下面为大家讲解一下滚动的主要参数设置:
align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。
Direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。
Behavior:用于设定滚动的方式,主要由三种方式:
behavior="scroll"表示由一端滚动到另一端;默认为此项
behavior="slide":表示由一端快速滑动到另一端,且不再重复;
behavior="alternate"表示在两端之间来回滚动。
Height:用于设定滚动字幕的高度。
Width:则设定滚动字幕的宽度。
Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度.
Scrollamount:用于设定活动字幕的滚动距离。数值越小,滚动的速度就越慢。
scrolldelay:用于设定滚动两次之间的延迟时间,数值越小,间隔就越小。
Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。
其中默认情况是向左滚动无限次,字幕高度是文本高度;

以上就是DEDECM模板循环滚动图片制作方法。

猜你喜欢

给我留言

留言无头像?