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 ...
随机推荐
- deep learning新征程（二）
deep learning新征程(二) zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2016-4-5 声明 1)该Dee ...
- Java8_03_流
一.前言 这一节我们来看下Java8的又一新特性:流. 本节主要包括以下内容: 流的相关概念 使用流 收集器 二.流的相关概念 流允许你以声明性方式处理数据集合,可以将其看成遍历数据集的高级迭代器. ...
- jsp中解决乱码问题
解决中文乱码 a) 第一种: String name=new String(name.getBytes("ISO-8859-1"),"UTF-8"); b) 第 ...
- 初识django框架
django框架 1.框架介绍 根据第一部分内容介绍,我们可以总结出一个web框架应该包含如下三部分:a.sockect服务.b.根据不同的url调用不同函数(包含逻辑).c.返回内容(模板渲染).常 ...
- 高级C/C++编译技术之读书笔记（五）之动态库版本控制
最近有幸阅读了<高级C/C++编译技术>深受启发,该书深入浅出地讲解了构建过程(编译.链接)中的各种细节,从多个角度展示了程序与库文件或代码的集成方法,提出了面向代码复用和系统集成的软件架 ...
- shh整合后web.xml、spring配置文件和struts.xml的内容
1:web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...
- 使用Gson轻松解决复杂结构的Json数据解析
转载请注明来源: http://blog.csdn.net/kjunchen/article/details/50961803 JSON简介 JSON(JavaScript Object Notati ...
- Linq:从XML获取数据
实体类 public class Customer { public string CustomerID { get; set; } public string CompanyName { get; ...
- MAC OS X常用命令总结
附录:UNIX常用命令 ============================================================================ 1. cd ...
- 十五、python沉淀之路--eval()的用法
一.eval函数 python eval() 函数的功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法:eval(source[, globals[, locals]]) -> v ...