DEDECM模板循环滚动图片制作

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模板循环滚动图片制作方法。