·返回首页
·联系我们
·在线留言

网站用户名
管理员用户名
密  码
验证码
搜索内容
搜索类别
自助建站
有机玻璃
当前位置:HOME > 建站技巧
图片从右向左滚动

发布时间 2010-04-17

复制以下代码到网站管理后台的代码区。详细操作步骤如下:先复制以下代码,然后打开后台的网页编辑器(比如底部区),在需要放滚动效果的位置,输入几个汉字,比如“我要做向左滚动图片效果”,然后单击“代码”视图,在代码里选中“我要做向左滚动图片效果”这几个字,然后按ctrl+V键,最后点保存,即可将滚动效果放在网页相应的位置。当然里面的9张图片你要上传到你的网站里后,再在我的文件里找到这些文件每张图片连接地址COPY来替换原来的图片地址,连接网址也可直接你的网址,或你网址里的某个页面。

以下是代码片段:

<div id=demo style=overflow:hidden;height:200;width:800;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.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123414.jpg" ></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123349.jpg" ></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123334.jpg"></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123255.jpg"></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123237.jpg"></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123225.jpg"></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123121.jpg"></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123028.jpg"></a><a href="http://www.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108122624.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.sz1788.cn" target="_blank"><img src="http://www.sz1788.cn/userlist/admin/data/userpic/20050108123414.jpg" border="0"></a>      
每张图片都是由这段代码所组成的, 绿色部份是图片连接的网址;紫色是图片所放的位置
       
2、 <div id=demo style=overflow:hidden;height:200;width:600;background:#214984;color:#ffffff>      

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

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

4、如果需要滚动图片需要边框,就删除以下这段代码
<style type="text/css">
img{ border:0px; }
</style>    
删除后,图片边框默认是紫色的.如果需要修改边框颜色,就在div标记的前面,即本实例的第一行代码前,再添加以下代码

<style type="text/css">
<!--
img{ border:#CC6600 1px solid }
-->
</style>

其中CC6600就代表边框颜色,颜色该颜色代码即可.

效果图如下:

[ 点击数:] [打印本网页] [关闭本窗口]
 

相关内容
查无记录


深圳市信诚网络有限公司
地址:深圳市宝安区前进路天源花园三栋505
电话:0755-29984916,传真:0755-29984916 邮箱:web@k5678.com
深圳网络公司深圳建站公司深圳企业建站  深圳网站建设 网站管理