欢迎您光临爱永设计官网！
电话图标 服务热线/微信：13436537174 QQ咨询：276583799

新闻资讯

news

首页 >> 新闻资讯>>建站教程>>正文

一个普普通通的无缝图片由右向左滚动

发表日期：2014-03-20 文章作者：爱永设计　 浏览次数：89336 次

今天做网站时，既然又遇到了这个无缝图片由右向左滚动的问题，这次爱永设计保存一份。

一个普通的无缝图片由右向左滚动

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无缝图片由右向左滚动</title>
</head>

<body>
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2014/03/hlmoban017te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2014/01/hlmoban016te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/10/hlmoban015te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/07/hlmoban014te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/07/hlmoban013te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/07/hlmoban012te.jpg” border=”0″ /></a>
</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>

</body>
</html>

备注：只有js代码放在要执行的代码下面才会起作用。

标签：,
将文章分享到..
相关资讯
最新主题模板
随机新闻
最新网站案例

  • 更多 +我们能做什么

    致力于互联网品牌建设与网络营销，专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等，服务范围涵盖基础的域名服务、主机 服务；企业邮箱、云服务器、网络营销等应用服务，为不同类型的客户提供良好的互联网应用定制解决方案，帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站， 低廉的价格，真诚的服务，我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务，出色的网页设计和制作能力，认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作！

Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱：aysheji@163.com 在线客服：276583799 模板演示地址：www.aymoban.com 备案号：京ICP备13060102号-3
服务内容： 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作