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:/ ...
随机推荐
- AC自动机（模板）
#include <cstdio> #include <cstring> #include <iostream> #include <cstdlib> ...
- hdu 2504
Problem Description 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. Input 第一 ...
- ExtJS 创建动态加载树
Ext 中导航树的创建有两种方式:1.首先将所有的数据读出来,然后绑定到前台页面.2.每点击一个节点展开后加载子节点.在数据量比较小的时候使用第一种方式加载的会快一些,然而当数据量比较大的时候,我还是 ...
- （原）Ubuntu16 中安装torch版的cudnn
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5668471.html 参考网址: https://devtalk.nvidia.com/default ...
- JS多选日期
项目需要一个可以选择多个日期的日期选择框,从网上找到一个单选的选择框源码 (http://blog.5d.cn/user2/samuel/200503/61881.html),修改成可以多选. 使用方 ...
- php 查看文档
http://www.runoob.com/php/php-datatypes.html php 学习网站 : http://www.phpfans.net/
- 跪求 EF缓存问题 也不知道是不是缓存 问题
1.数据库里面查的结果 2 vs里面查的结果 为什么 不是16 而是2 下面是代码 /// <summary> /// 权限检查 /// </summary> public ...
- Improving the AbiWord's Piece Table
Improving the AbiWord's Piece Table[转] One of the most critical parts of any word processor is the b ...
- 【关于微软的上一代模板引擎 T4引擎】
导语:国内有名的动软代码生成器用的就是T4引擎......可以自己下载下来用用,批量生成固定模式的代码文件,十分有用........... 示例代码:示例代码__你必须懂的T4模板:浅入深出.rar ...
- git与svn的使用比较
先说下基础知识: git是本地会(维护)有个版本仓库. svn本地也会维护一个自己的信息(一般是目录结构和文件状态的信息),这里的文件状态一般是指:文件是已删除,还是已添加,还是被修改等等.一般是会有 ...