div+css+javascript 走马灯图片轮换显示
2024-10-13 14:24:10
效果如图
<!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://www.trip-j.net/images/hotelimg/6614/200811201335594038.jpg" border="0" /></a>
<a href="#"><img src="http://www.trip-j.net/images/hotelimg/2457/20081061952145229.jpg" border="0" /></a>
<a href="#"><img src="http://www.trip-j.net/images/hotelimg/2574/20081091921231611.jpg" border="0" /></a>
<a href="#"><img src="http://www.trip-j.net/images/hotelimg/2395/20081062005358398.jpg" border="0" /></a>
<a href="#"><img src="http://www.trip-j.net/images/hotelimg/3564/20081191214549634.jpg" border="0" /></a>
<a href="#"><img src="http://www.trip-j.net/images/hotelimg/3129/20081091715454669.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>
最新文章
- PHP AES的加密解密
- JS中数组的操作[转]
- [bzoj1901][zoj2112][Dynamic Rankings] (整体二分+树状数组 or 动态开点线段树 or 主席树)
- C语言Hello world
- Linux摄像头驱动学习之:(一)V4L2_框架分析
- 如何用ASPxTreeView建立三级树(显示及数据绑定)
- 什么是MBeanServer
- careercup-C和C++ 13.5
- HTML 5 video 视频标签全属性详解
- 禁止ultraedit自动检查更新的方法
- Sicily 1156. Binary tree
- Go代理,修改标题
- ThinkPHP框架研究之一 基本函数 M和D的区别
- MAC下Xcode配置opencv(2017.3.29最新实践,亲测可行)
- 【Selenium】idea的selenium环境配置
- Foxmail6.5 ERR LOGIN FAIL 重新输入口令
- codeforces 985B Switches and Lamps
- 内存或磁盘空间不足 Microsoft Excel无法再次打开解决方法
- 接口自动化思路_JAVA
- abaqus学习笔记-abaqus与umat调用基本原理