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

随机推荐

亚马逊EC2
亚马逊EC2编辑本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 亚马逊弹性计算云(EC2,Elastic Compute Cloud)是一个让使用者可以租用云端电脑运行所需 ...
Chrome浏览器导出数字证书
1.F12打开开发者工具,选中"Security"面板-->找到"View certificate",点击 2.选中“详细信息”面板-->复制到文件
有云Ceph课堂：使用CivetWeb快速搭建RGW
转自:https://www.ustack.com/blog/civetweb/ 优秀的开源项目正在改变传统IT,OpenStack名头最响,已经成为了IaaS的事实标准.Ceph同样颇有建树,通过其 ...
【spark】RDD操作
RDD操作分为转换操作和行动操作. 对于RDD而言,每一次的转化操作都会产生不同的RDD,供一个操作使用. 我们每次转换得到的RDD是惰性求值的也就是说,整个转换过程并不是会真正的去计算,而是只记录 ...
Codeforces Round #394 (Div. 2) B. Dasha and friends
B. Dasha and friends time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...
Android中SQLite介绍
现在的主流移动设备像Android.iPhone等都使用SQLite作为复杂数据的存储引擎,在我们为移动设备开发应用程序时,也许就要使用到SQLite来存储我们大量的数据,所以我们就需要掌握移动设备上 ...
2017.11.7 Python 制作EFM32/ AVR批量烧录工具
Customer need program quickly asap. ok,I need to set up a table for test. 1 reference data http://ww ...
Flask 的请求扩展与中间件
Flask 的请求扩展与中间件 flask 可以通过扩展(装饰器)来实现类似于django 中间件的功能类似于django 的中间件, 在执行视图函数之前, 之后的执行某些功能 1 @app ...
Markdown转HTML之Node篇
前言环境及编码搭建环境 express markdown-it commander rd 核心编码 cmd_preview模块 cmd_build模块打造命令行工具写点xxmd 演示总结前 ...
Android Animation 动画
动画类型 Android的animation由四种类型组成 Android动画模式 Animation主要有两种动画模式:一种是tweened animation(渐变动画) XML中 JavaCo ...

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

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

随机推荐

热门专题