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:/ ...
随机推荐
- （原）ubuntu上安装qt
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5652429.html 参考网址: http://doc.qt.io/qt-4.8/install-x1 ...
- HDU-简单计算器-1237
这道题我做了一天,把中缀表达式转化为后缀表达式,但遇到了储存的问题,考虑了好久,写出后又调试,弄了一天,下面说一下中缀表达式转换后缀表达式: 算法: 中缀表达式转后缀表达式的方法: 1.遇到操作数:直 ...
- （转）set集合的应用
set集合的应用 python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), diffe ...
- STC10F10XE定时器中断输出10KHz的方波程序
//咱做硬件的也动手做点测试程序,为了测试新做的电机驱动板,找了个51的板子当10K信号发生器测试IGBT开关延时时间. #include <STC_NEW_8051.H>#include ...
- Prime Path（POJ 3126 BFS）
Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15325 Accepted: 8634 Descr ...
- Taglib、EL、OGNL
Taglib.EL.OGNL 阅读目录 1. Taglib(tag library) 标签库 2. EL(Expression Language) 表达式 3. OGNL(Object-Graph N ...
- MySQL--query-cache
知识准备: 1.mysql 的query-cache是什么? mysql可以把执行完成的select 语句和这个select 语句对应的结果集缓存起来:下次再用调用相同的select 语句时就直接返 ...
- c# Parallel并行运算
string str = ""; DataTable dt=new DataTable(); dt.Columns.Add("name", typeof(Sys ...
- Unique Paths II 解答
Question Follow up for "Unique Paths": Now consider if some obstacles are added to the gri ...
- PHP MySQL 创建数据库和表 之 Create
创建数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 语法 CREATE DATABASE database_name 为了让 PHP 执行上面的语句,我们必须使用 my ...