（含上下左右滚动代码）

<!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>无缝滚动代码的更多相关文章

  1. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 刚部署的程序加载不出来css,js以及图片

    刚部署的程序加载不出来css,js以及图片,解决方式 需要在配置中加入静态资源 方法一: controller.xml中加入 <mvc:annotation-driven/> <mv ...

  3. asp.net MVC发布iis无法加载css,js和图片

    今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...

  4. ThinkPHP的调用css,js和图片的路径

    按网上的说法,在根目录下建了一个Public目录,把css,js和图片放到Public目录下,然后用__PUBLIC__/...或__ROOT__/Public/...调用.但是发现无论如何改路径都无 ...

  5. DIV+CSS+JS实现色彩渐变字体

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  8. HTML,DIV+CSS,js,JQ,UI-WEB前端设计经验

    目前比较全的CSS重设(reset)方法总结   在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览 ...

  9. DIV+CSS如何让图片和文字在同一行！

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

随机推荐

  1. go 编译

    linux: set GOARCH=amd64 set GOOS=linux go build -o app_name main.go echo "编译完成,任意键退出" paus ...

  2. Log4j 发送 EMail 的配置

    项目上线后,运行时往往也还会有异常发生,在异常抛出时,希望即时的得到反馈.所以需要配置LOG4J的发送EMAIL功能. 项目中原来使用的的Log4j版本为1.2.9 ,但此版本并不支持邮件服务的认证功 ...

  3. <mvc:default-servlet-handler/>的作用

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...

  4. Android studio 导入ApiDemo

    1.import 项目,sdk目录:sdk\samples\android-21\legacy\ApiDemos,import时一直下一步就ok了. 2.Error:Error: The file n ...

  5. OS快捷键

    OS X 键盘快捷键 若要使用键盘快捷键或按键组合,您可以同时按修饰键和字符键.例如,同时按下 Command 键(标有 符号的按键)和“c”键会将当前选中的任何内容(文字.图形等)拷贝至夹纸板.这也 ...

  6. BAT级别对照表

  7. Arcgis for Js实现graphiclayer的空间查询（续）

    上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询.首先,空间查询的方式:提供多种类型的空间查询,包括点周边.线周边.面内等 ...

  8. 同一局域网环境下的arp欺骗和中间人攻击（mac）

    最近读了一篇有关arp欺骗和中间人攻击的文章,于是乎就想着自己实现一下,顺便验证下微信在回话劫持后的安全性. 1.本机环境 Macbook Air:OS X 10.11 El Captain 2.推荐 ...

  9. eclipse javaw.exe in your current path问题

    问题: 第一次运行eclipse的时候,可能会提醒找不到javaw.exe ******等的问题 很坑的! 解决方案: 无法启动Eclipe,因找不到javaw.exe 还是环境变量的问题!!! 注意 ...

  10. Java进阶知识点4：不可变对象与并发 - 从String说起

    一.String的不可变特性 熟悉Java的朋友都知道,Java中的String有一个很特别的特性,就是你会发现无论你调用String的什么方法,均无法修改this对象的状态.当确实需要修改Strin ...