（含上下左右滚动代码）

<!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. Ceph：pg peering过程分析

    转自:https://www.ustack.com/blog/ceph%ef%bc%8dpg-peering/ Peering:互为副本的三个(此处为设置的副本个数,通常设置为3)pg的元数据达到一致 ...

  2. win8 商店应用 概观

    外观: 1,适应性好.可以在各种外形规格和显示大小上正确的展示数据. 2,磁贴. 交互方式: 1,应用栏.使用应用栏可以向用户显示命令和工具.默认情况下,应用栏会被隐藏,当用户使用手指从屏幕的底部边缘 ...

  3. Spring属性注入、构造方法注入、工厂注入以及注入参数（转）

    Spring 是一个开源框架. Spring 为简化企业级应用开发而生(对比EJB2.0来说). 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.Spring ...

  4. js数组，数字函数，字符串函数，表单验证，hashMap，堆栈，日期函数，call函数

    1.javascript的数组API Js代码 收藏代码 //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.lengt ...

  5. Python基础学习（第2天）

    第三课:序列(sequence) 1.序列是一种有顺序的元素的集合 序列可以包含1个或多个元素,也可以不包括任何元素: 序列中的元素可以是[基础数据类型]中任一种,也可以是[别的序列]. s1 = ( ...

  6. vsftp中的local_umask和anon_umask

    umask是unix操作系统的概念,umask决定目录和文件被创建时得到的初始权限umask = 022 时,新建的目录 权限是755,文件的权限是 644umask = 077 时,新建的目录 权限 ...

  7. C++中标准输入流cin与Ctrl+Z使用时的问题

    今天使用C++编写了一段小程序,练习使用标准库的算法,代码如下: #include <iostream> #include <algorithm> #include <v ...

  8. Azure VM Scalable Sets -- 适用IAAS架构

    1. 选择Virtual Machine scale set2. 选择resource manager(或创建最新)3. 基本信息配置4. 配置scale的参数(可伸缩的balance模型):VM最小 ...

  9. Kali Linux：使用nmap扫描主机

    nmap-Network Mapper,是著名的网络扫描和嗅探工具包.他同样支持Windows和OS X. 扫描开放端口和判断操作系统类型 先让我们ping一段地址范围,找到启动的主机: # nmap ...

  10. 阿里云，腾讯云，等等的云 Ubuntu14.04升级16.04

    16.04有很多好处.在此不说了 这几天来回折腾了各种的云,然后发现国内的都没有16.04 但是ubuntu可以直接在线升级 在此记下来升级的过程 不管是腾讯云也好 阿里云也好,或者别的什么云,只要是 ...