网站建设| 网站制作| 网站设计 找杭州红站网络公司 杭州做网站建设 SEO优化 企业网搭建 微网微营销 杭州网络公司 杭州APP开发wap手机网 网站托管 网站维护推广

网站建设
联系我们

DEDECMS模版DEDECMS案例图片循环滚动的各种效果及框架

发布于:2014-10-15 21:47来源:杭州做网站 作者:杭州做网站 点击:
 
在我们做网站的时候会牵涉到许许多多的不同的问题,找资源,网上很多案例图片滚动的代码,但是不一定都是好用的,或者不是都适合你的网站需要的效果的,要根据自己的网站改版,不是很清楚源码的朋友,就有点吃力了,以下红站网络
 
举例说明:
 
DEDECMS模版DEDECMS 有间隙循环滚动图片制作
 
第一步:找到图文资讯代码的位置
将<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表示一直滚动下去,直到页面更新。
其中默认情况是向左滚动无限次,字幕高度是文本高度;
 
 
==============================================
 
 
图片循环滚动代码:
 
 
<!-- /客户网站案例 -->
<div class="w980 center clear mt3">
    <div class="i_case">
        <div class="i_box_top"><span><a href="{dede:global.cfg_cmsurl/}/case/"><img src="{dede:global.cfg_templets_skin/}/images/diy/more_bt.gif" alt="更多案
 
例"/></a></span>经典案例   Classic display case</div>
        <!-- /滚动图片 -->
        <div class="case_all">
      
       
 
 
<ul>
 
          
          <div id=demo style="overflow:hidden; width:980px;" > 
 <table border=0 align="center" cellpadding=1 cellspacing=1> 
 <tr><td valign="top" bgcolor="#FFFFFF" id=marquePic1> 
 <table width='100%' border='0' cellspacing='20'align='center'> 
 <tr><!--这里的图片暂时是调用:图片中心的[图片太少的话就会滚一下就停了]--> 
 {dede:arclist row='8' typeid='11' orderby='pubdate' type='image.' imgwidth='200' imgheight='270'} 
 <td> 
 <a href="[field:arcurl/]">[field:image/]</a> 
 </td> 
 {/dede:arclist} 
 
</tr> 
 </table> 
 </td><td id=marquePic2 valign=top></td></tr> 
 </table> 
 </div> 
 <!--滚动图结束--> 
 
<!--滚动图片的js--> 
 <script type="text/javascript"> 
 var speed=18 
 marquePic2.innerHTML=marquePic1.innerHTML 
 function Marquee(){ 
 if(demo.scrollLeft>=marquePic1.scrollWidth){ 
 demo.scrollLeft=0 
 }else{ 
 demo.scrollLeft++ 
 } 
 } 
 var MyMar=setInterval(Marquee,speed) 
 demo.onmouseover=function() {clearInterval(MyMar)} 
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
 </script> 
 
      </ul>
   
   
   
        </div>
        <!-- /滚动图片 -->
   
附:所调用的图片大小在css里更改width和height的尺寸,以及本段模板代码的width和height的尺寸。
===================================================
 
图片滚动框架:
 
要配合css文件,style.css文件可以参照比较好的杭州做网站网络公司  红站网络公司的案例滚动文件
 
 
<!-- /客户网站案例 -->
<div class="w980 center clear mt3">
    <div class="i_case">
        <div class="i_box_top"><span><a href="{dede:global.cfg_cmsurl/}/case/"><img src="{dede:global.cfg_templets_skin/}/images/diy/more_bt.gif" alt="更多案
 
例"/></a></span>经典案例&#160;&#160;&#160;Classic display case</div>
        <!-- /滚动图片 -->
        <div class="case_all">
        <div class="case_left"><A onmouseup=ISL_StopUp_1()  onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);" target=_self><img 
 
id="LeftArr" src="{dede:global.cfg_templets_skin/}/images/green_skin_l.jpg" alt="上一个案例"/></A></div>
            <div class="case_width" id="ISL_Cont_1"><DIV class="ScrCont">
            <div id="List1_1">
               【这里是id调用:    {dede:arclist row=20 orderby='id' typeid='18,19,20,21,22,23' imgwidth='210' imgheight='150'}
                    <a href="[field:arcurl/]">[field:image/]<p class="title">[field:title/]</p></a>
                    {/dede:arclist}】
             </div>
             <DIV id="List2_1"></DIV>
            </DIV></div>
        <div class="case_right"><A onmouseup=ISL_StopDown_1()  onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() href="javascript:void(0);" 
 
target=_self><img id="RightArr" src="{dede:global.cfg_templets_skin/}/images/green_skin_r.jpg" alt="下一个案例"/></A></div>
        </div>
        <!-- /滚动图片 -->
    </div>
</div>
<!-- /客户网站案例 -->
 
文章来源:红站网络公司
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
tag标签:
------分隔线----------------------------
------分隔线----------------------------
建站咨询:
广告策划:
技术支持:
售后支撑群:
315566411

红站技术论坛