搜索内容 : 搜索类别 :
   
 
网站用户名
管理员用户名
密  码
验证码
 
 
社区通
盈网
iephotoshop
彭城视窗
视频教程网
图片工具
中国周易
 
 
图片从右向左滚动

发布时间 2008-07-10

第一步:将图片大小为290*150像素的九张图片,分别命名为:1.jpg;2.jpg;3.jpg;4.jpg… 9.jpg 

第二步:在桌面在创建一个文件夹,命名为"left",将9张图放在这个文件夹里

第三步:用flashfxp软件将left文件夹上传到data目录下

第四步:复制以下代码到网站管理后台的代码区。详细操作步骤如下:先复制以下代码,然后打开后台的网页编辑器(比如底部区),在需要放滚动效果的位置,输入几个汉字,比如“我要做向左滚动图片效果”,然后单击“代码”视图,在代码里选中“我要做向左滚动图片效果”这几个字,然后按ctrl+V键,最后点保存,即可将滚动效果放在网页相应的位置。

以下是代码片段:

<div id=demo style=overflow:hidden;height:150;width:500;background:#214984;color:#ffffff> 
<style type="text/css">
img{ border:0px; }
</style> 
<table align=left cellpadding=0 cellspace=0 border=0> 
<tr> 
<td id=demo1 valign=top>
<a href="http://www.51rich.net" target="_blank"><img src="data/left/1.jpg" ></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/2.jpg" ></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/3.jpg"></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/4.jpg"></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/5.jpg"></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/6.jpg"></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/7.jpg"></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/8.jpg"></a><a href="http://www.51rich.net" target="_blank"><img src="data/left/9.jpg"></a> 
</td> 
<td id=demo2 valign=top></td> 
</tr> 
</table> 
</div> 

<script> 
var speed=10;
demo2.innerHTML=demo1.innerHTML;
function Marquee()

    if(demo2.offsetWidth-demo.scrollLeft<=0) 
    {
        demo.scrollLeft-=demo1.offsetWidth;
    }
    else
    { 
        demo.scrollLeft++;
    } 

var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() 
{
    clearInterval(MyMar);
}
demo.onmouseout=function()
{
    MyMar=setInterval(Marquee,speed);

</script>


   
代码说明:         


1、  <a href="http://www.51rich.net" target="_blank"><img src="data/left/1.jpg" border="0"></a>      
每张图片都是由这段代码所组成的, 绿色部份是图片连接的网址;紫色是图片所放的位置
       
2、 <div id=demo style=overflow:hidden;height:150;width:500;background:#214984;color:#ffffff>      

代码中蓝色部份是整个滚动效果页面的高度与宽度;红色部分是背景色,修改这个颜色代码就可更换蓝色背景   

3、 var speed=10; 这是控制滚动速度的,修改10 这个数值即可。数值越大,速度越慢。

4、如果需要滚动图片需要边框,就删除以下这段代码即可
<style type="text/css">
img
</style>    

效果图如下:

 

相关内容
查无记录

首 页| 关于点点 | 建站帮助 | 客服中心 | 友情链接 | 服务条款 | 付款方式 | 广告服务 | 联系我们 | 网站地图  免费代码大全

都市圈   网页教学网   生成的Logo图像   CC视频专家   中国个人站长站   叶子树   生成的Logo图像

本站还提供无锡本地建站服务:无锡网站建设  无锡央视广告  无锡央视展播  无锡企业媒体网站信息发布  无锡企业媒体专访

业务部邮箱:dd118@dd118.com   客服部邮箱:kefu@dd118.com  技术部邮箱:jishu@dd118.com  

Copyright @2005-2019 diandiannet Inc 版权所有: 无锡国搜信息科技有限公司(原无锡点点网络科技有限公司)

                             苏ICP备07508751号                                   ip5108.htm 流量专家

网站管理