DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
（含上下左右滚动代码） <!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>
<title></title>
<style type="text/css">
<!--
UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
LIST-STYLE-POSITION: outside;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
overflow: hidden;
} #S_LIST LI {
width:154px;
height:auto;
float:left;
padding: 0px;
margin: 0px;
list-style-image: none;
list-style-type: none;
}
#S_LIST A {
DISPLAY: block;
MARGIN: 0px;
WIDTH: 154px;
HEIGHT: auto;
TEXT-ALIGN: center;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 930px;
height:180px;
}
#demo img {
border: 1px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul id="S_LIST">
<li><a href="#"><img src="1.jpg" width="154" height="130" border="0" /></a>
<a href="#" >1</a></li>
<li><a href="#"><img src="2.jpg" width="154" height="130" border="0" /></a>
<a href="#" >2</a></li>
<li><a href="#"><img src="3.jpg" width="154" height="130" border="0" /></a>
<a href="#" >3</a></li>
<li><a href="#"><img src="4.jpg" width="154" height="130" border="0" /></a>
<a href="#" >4</a></li>
<li><a href="#"><img src="5.jpg" width="154" height="130" border="0" /></a>
<a href="#" >5</a></li>
<li><a href="#"><img src="6.jpg" width="154" height="130" border="0" /></a>
<a href="#" >6</a></li>
<li><a href="#"><img src="7.jpg" width="154" height="130" border="0" /></a>
<a href="#" >7</a></li>
<li><a href="#"><img src="8.jpg" width="154" height="130" border="0" /></a>
<a href="#" >8</a></li>
<li><a href="#"><img src="9.jpg" width="154" height="130" border="0" /></a>
<a href="#" >9</a></li>
</ul>
</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 id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left">
<div id=demo1>
<img src="data:images/js01.gif" width="120" height="120">
<img src="data:images/js02.gif" width="120" height="120">
<img src="data:images/js03.gif" width="120" height="120">
<img src="data:images/js04.gif" width="120" height="120">
<img src="data:images/js05.gif" width="120" height="120">
<img src="data:images/js06.gif" width="120" height="120">
<img src="data:images/js07.gif" width="120" height="120">
<img src="data:images/js08.gif" width="120" height="120">
<img src="data:images/js09.gif" width="120" height="120">
</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码的更多相关文章
- 下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 刚部署的程序加载不出来css,js以及图片
刚部署的程序加载不出来css,js以及图片,解决方式 需要在配置中加入静态资源 方法一: controller.xml中加入 <mvc:annotation-driven/> <mv ...
- asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
- ThinkPHP的调用css,js和图片的路径
按网上的说法,在根目录下建了一个Public目录,把css,js和图片放到Public目录下,然后用__PUBLIC__/...或__ROOT__/Public/...调用.但是发现无论如何改路径都无 ...
- DIV+CSS+JS实现色彩渐变字体
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- HTML,DIV+CSS,js,JQ,UI-WEB前端设计经验
目前比较全的CSS重设(reset)方法总结 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览 ...
- DIV+CSS如何让图片和文字在同一行！
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
随机推荐
- 基于Python实现的四则运算生成程序
Github项目地址:传送门 小组成员:黄晓彬(代码实现) 黄钰城(代码审查) 需求: 1. 使用 -n 参数控制生成题目的个数. 2. 使用 -r 参数控制题目中数值(自然数.真分数和真分数分母)的 ...
- Zookeeper集群是如何升级到新版本的
方案1:复用老数据方案 这是经过实践的升级方案,该方案是复用旧版本的数据,zk集群拓扑,配置文件都不变,只是启动的程序为最新的版本. 参考文章: Zookeeper集群是如何升级到新版本的 方案2:重 ...
- apply 无循环拼接数组
apply()第二个参数只能是数组,这个数组将作为参数传给原函数的参数列表arguments. 其实在实际开发中,JS 继承的方法并不止这一种,使用原型链继承是更加常用的方式,此外还有构造函数继承,这 ...
- makefile 学习归纳
makefile 学习归纳 一直希望 好好整理下 makefile的写法,这在linux编程界是必备技能.下面就好好的说道说道. 可以参考的大神总结 整理 makefile是供make命令执行的 脚本 ...
- 微信小程序-富文本解析插件wxParse基础使用及问题解决
一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...
- PS基础教程[3]如何去除照片上的水印
网络上的照片大部分都有很多的水印,要嘛就是网站的地址,要嘛就是一些煽情的文字,我们看图片想要的可不是这些东西,那么我们怎样去掉图片上的水印呢?本次我们就来分享一下仿制图章工具的使用. 方法 1.打开P ...
- self = [super init] 最终解释
答: init 中调用super的 init方法来初始化自己所包含有的父类信息 1.内存分配 内存应该在[Class alloc]的时候就已经分配了,大小和类型应该由对应的Clas ...
- 一次SQL Server 10054 Troubleshooting
问题 对某个库新增了一个订阅节点,然后需要把一些应用切到新订阅库,以分散负载.当应用切换后,有一个应用每次启动不到30秒,总是报超时的错误,而error log中又没有任何记录: Timeout ex ...
- ASM概述
ASM的全称是 Automatic Storage Management,ASM 是为存放oracle 数据文件而设计的一个volume manager 和 文件系统 管理的技术. ASM 支持ora ...
- 洛谷【P1064】金明的预算方案
浅谈\(DP\):https://www.cnblogs.com/AKMer/p/10437525.html 题目传送门:https://www.luogu.org/problemnew/show/P ...