div+css+javascript 走马灯图片轮换显示
<!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>
div+css+javascript 走马灯图片轮换显示的更多相关文章
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- JavaScript之图片轮换
<!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...
- 不定高度的div背景或背景图片不显示问题
在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...
- Html5 Css实现方形图片 圆形显示
<!doctype html><html><head><meta charset="utf-8"><title>方形图片 ...
- DIV+CSS如何让图片和文字在同一行！
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- 网页首页制作总结（div+css+javascript）
一.对网页整体布局,分几个版块 如下图所示: 确定布局之后,规划好网页,准备素材,按照标准文档流的顺序,从上到下,从左到右写入代码. 以上图为例,分为两部分,红色的主体部分和页脚.主体部分分割为头部. ...
- css——手机端图片正确显示
这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下 左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...
- css使Img图片居中显示
<div class="flex-center listing-img"> <img v-if="item.imgUrl" v-bind:sr ...
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
(含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
随机推荐
- 数据库操作CURD
JDBCCURD操作实例 19. 五 / J2EE / 没有评论 代码目录结构: domain javabean: util 工具类 jdbcUtil是连接数据mysql数据库的工具类 ...
- 关于安卓的log学习
什么时候会产生log文件? 1. 程序异常退出 Uncaused Exception. 2. 程序强制关闭 Force Closed(FC). 3. 程序无响应 Application No Resp ...
- project euler 19: Counting Sundays
import datetime count = 0 for y in range(1901,2001): for m in range(1,13): if datetime.datetime(y,m, ...
- ASP.NET Ajax
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...
- 利用Azure Automation实现云端自动化运维(3)
Azure automation的认证方式:证书 该种方式是推荐的进行Automation认证的方式,好处在于安全性高,过期时间由自己控制,不好的地方在于大家在Windows上要生成证书比较麻烦, ...
- order by 中 使用decode
表内容如下: 实现以name字段中的ABCDE的顺序排序,以及按照money字段从小到大排序. select name,money from t2 ,,,,) , money
- 用于下载AD官网登录账号：User name: fuxin918@fuxin918.com Passeword: s6c0W1w8
用于下载AD官网登录账号:User name: fuxin918@fuxin918.com Passeword: s6c0W1w8
- C# Switch is Type
常规用法: Type t = sender.GetType(); if (t == typeof(Button)) { var realObj = (Button)sender; // Do Some ...
- 简单了解下Dubbo
1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...
- Combination Sum 解答
Question Given a set of candidate numbers (C) and a target number (T), find all unique combinations ...