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

随机推荐

IOS-将任意对象存进数据库
model // // HMShop.h // 将任意对象存进数据库 // // Created by apple on 14/11/20. // Copyright (c) 2014年 heima. ...
【Python】小技巧
1. 退出python shell 在windows下,Ctrl + Z退出在unix下,Ctrl + D退出
AFNetworking网络请求与图片上传工具（POST）
AFNetworking网络请求与图片上传工具(POST) .h文件 #import <Foundation/Foundation.h> /** 成功Block */ typedef vo ...
intellij idea 如何更改比编辑器文本字体和大小
换上了intellij idea之后,第一件事就是想要改变下文字字体,因为在我这个27寸的2k分辨率的屏幕上,文字显然太小了. intellij idea字体设值分成两部分,一部分是UI部分字体字号设 ...
CentOS系统内核、操作系统位数以及系统参数查看
2016-07-29 一.系统内核的查看方法 1.uname -a 显示详细的内核信息 Linux localhost.localdomain 3.10.0-229.el7.x86_64 #1 SMP ...
SP104 HIGH - Highways
vjudge luogu 题意就是要你求无向图的生成树个数.\(n\le 12\),保证答案不爆\(long long\). sol 矩阵树定理直接上. 如果怕掉精可以写整数意义下的高斯消元,需要辗 ...
【java规则引擎】java规则引擎搭建开发环境
Drools官网:http://www.jboss.org/drools Drools and jBPM consist out of several projects:(Drools软件包提供的几个 ...
#503. 「LibreOJ β Round」ZQC 的课堂容斥原理+Treap
题目: 题解: 比较容易发现 : \(x,y\) 的贡献是独立的. 所以可以分开考虑. 假设我们考虑 \(x\).向量在 \(x\) 方向的投影依次是 : \(\{a_1,a_2, ... ,a_n\ ...
[原]zeromq框架测试报告
一.环境: 服务器:linux 4核 16G 虚拟机 1台客户端:linux 4核 16G 2000台(模拟) 数据包大小:1036字节二.参数设置: ulimit -n 65536 服务端处理线 ...
bzoj 1499 [NOI2005]瑰丽华尔兹——单调队列优化dp
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1499 简单的单调队列优化dp.(然而当时却WA得不行.今天总算填了坑) 注意滚动数组赋初值应 ...

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

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

随机推荐

热门专题