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 ...

随机推荐

【spark】示例：求极值
我们有这样的数据 1.建立SparkContext读取数据 (1)建立sc (2)通过sc.textFile()读取数据创建Rdd 2.过滤数据通过filter(line => line.tr ...
【scala】占位符
Scala语言为了让函数字面量更加精简,还可以使用下划线作为占位符,用来表示一个或多个参数. 我们用来表示的参数必须满足只在函数字面量中出现一次. 我们用例子来看占位符的用法 scala> va ...
条款25：考虑写出一个不抛出异常的swap函数
首先说下标准库的swap算法: namespace std{ template<typename T> void swap(T & a, T & b) { T tmp = ...
为什么这个地方用重定向会报错.只能用服务器跳转?? 为什么我加了过滤器,还是能直接登陆 servlet
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, ...
C 时间函数总结
头文件 time.h 处理器时间函数 clock_t clock(void) 处理器的处理时间,如可以在 main开始的地方使用这个函数,然后再完毕后调用这个函数并减去之前的返回值,为了 ...
HihoCoder 1122二分图二 ---最大匹配之匈牙利算法
二分图二•二分图最大匹配之匈牙利算法时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述上一回我们已经将所有有问题的相亲情况表剔除了,那么接下来要做的就是安排相亲了.因为过 ...
MySql必知必会实战练习（二）数据检索
在上篇博客MySql必知必会实战练习(一)表创建和数据添加中完成了各表的创建和数据添加,下面进行数据检索和过滤操作. 1. Select子句使用顺序 select--->DISTINCT---& ...
Microsoft Office Visio 2013 （安装 + 激活）
Visio是一款能处理复杂信息.系统和流程进行可视化.分析和交流的软件,从“office 2003”以后,Visio作为一个单独软件发行,不再集成于office办公软件. 工具/原料 Visio 电脑 ...
如何解决无法通过SSL加密与SQLServer建立连接
在部署项目时,经常会遇到驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接,错误:Java.lang.RuntimeException: Could not gene ...
win7安装和配置IIS7
Internet Information Services(IIS,互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.IIS意味着你能发布网页, 要在wi ...

DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码的更多相关文章

随机推荐

热门专题