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:/ ...
随机推荐
- c++ 指针的简单用法
对于指针,其实只需要明白几点就可以. 1.指针,是一个数值为地址的变量,这里尤其注意,指针变量的值是地址!就是例如40002这种像门牌号的地址值,其实就是内存中的一个编号. 2.&,该符号的意 ...
- BestCoder Round #20 部分题解(A,B,C)(hdu5123,5124,5125)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud who is the best? Time Limit: 2000/1000 MS ...
- PHP--变量部分知识点
PHP全局变量 PHP全局变量作用域不同与C,在函数内部不可以使用全局变量,要在函数内部使用全局变量需要,global $var或者使用超全局变量数组$GLOBALS['var']. 静态变量 PHP ...
- oracle 时间比较查询
select * from table where add_time>=to_date('2015/01/03','yyyy/mm/dd')
- SQL实现递归及存储过程中In()参数传递解决方案[转]
SQL实现递归及存储过程中In()参数传递解决方案 1.SQL递归 在SQL Server中,我们可以利用表表达式来实现递归算法,一般用于阻止机构的加载及相关性处理. -->实现: 假设 ...
- 为什么在CSS中不要再使用@import
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/为什么在CSS中不要再使用@import
- HTML5_1
2014,新年伊始,我不再是那个憧憬离开大学校园.过自由生活的傻丫头了.23岁,时间荏苒,差不多四分之一的人生已悄然逝去,大学生活差不多也快要画上句号了.工作.工作永远都是人生的一部分.曾想着随便找一 ...
- EditText判断用户输入完成，然后进行操作解决方案
private Timer timer = new Timer(); private final long DELAY = 1000; // in ms EditText editTextStop = ...
- python2 ----函数字典的使用
问题背景: 最近在用python2为sublime2写一个插件,其中有一个命令功能,就是输入不同的命令调用不同的函数,但是python不支持switch,只用ifelse的话感觉特别的low而且明显不 ...
- 狗屎的asp.net core 果然发生了重大的变更
狗屎的asp.net core 果然发生了重大的变更 ....仔细看官方的文档,想骂娘....你发布版本的时候,能不能先想好先设计好再发布?朝三暮四...大撒笔....你老这样变来变去,谁还敢碰你啊 ...