javascript-图片横向无缝隙滚动(可在服务器运行)
前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了.
css代码:
<style type="text/css">
.scroll_div {
width: 1000px;
height: 250px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
background: #ffffff;
} .scroll_div img {
width: 250px;
height: 250px;
border:;
border: 1px #efefef solid;
} #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {
display: inline;
}
javascript代码:
<script language="javascript">
function scroll_img_left() {
var speed = 20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML = scroll_begin.innerHTML
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
scroll_div.scrollLeft -= scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
} var MyMar = setInterval(Marquee, speed)
scroll_div.onmouseover = function () {
clearInterval(MyMar)
}
scroll_div.onmouseout = function () {
MyMar = setInterval(Marquee, speed)
}
}
</script>
html代码:
<div class="">
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href=""><img src="data:image/11.jpg"/></a></li>
<li><a href=""><img src="data:image/222.jpg"/></a></li>
<li><a href=""><img src="data:image/444.jpg"/></a></li>
<li><a href=""><img src="data:image/555.jpg"/></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
</div>
完整html页面代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>javascript-图片横向无缝隙滚动(可在服务器运行)</title>
<style type="text/css">
.scroll_div {
width: 1000px;
height: 250px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
background: #ffffff;
} .scroll_div img {
width: 250px;
height: 250px;
border: 0;
border: 1px #efefef solid;
} #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {
display: inline;
}
</style>
<script language="javascript">
function scroll_img_left() {
var speed = 20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML = scroll_begin.innerHTML
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
scroll_div.scrollLeft -= scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
} var MyMar = setInterval(Marquee, speed)
scroll_div.onmouseover = function () {
clearInterval(MyMar)
}
scroll_div.onmouseout = function () {
MyMar = setInterval(Marquee, speed)
}
}
</script>
</head>
<body onload="scroll_img_left()">
<div style="text-align:center">
<div class="">
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href=""><img src="data:image/11.jpg"/></a></li>
<li><a href=""><img src="data:image/222.jpg"/></a></li>
<li><a href=""><img src="data:image/444.jpg"/></a></li>
<li><a href=""><img src="data:image/555.jpg"/></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
</div>
</div>
<!--//向左滚动代码结束-->
</body>
</html></td>
</tr>
</table>
javascript-图片横向无缝隙滚动(可在服务器运行)的更多相关文章
- javascript-图片横向无缝隙滚动
<style type="text/css"> <!-- ul,li,div{margin:0; padding:0; font-size:12px;} #dem ...
- Js上下左右无缝隙滚动代码
转载:http://www.cnblogs.com/chenjt/p/4193464.html 主要用到dom.offsetWidth 这个表示实际的宽度. dom.scrollLeft 这个表示这个 ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- flash滑杆控制图片横向滚动
flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html
- 横向不间断滚动DIV
横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- javascript焦点图之垂直滚动
html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- POJ_2001_Shortest_Prefixes_(Trie)
描述 http://poj.org/problem?id=2001 给出一组单词,求每个单词的最小唯一前缀. 最小唯一前缀:该前缀不能是其他单词的前缀,并且最小,如果不存在,则为该单词本身. Shor ...
- XSS跨站脚本攻击在Java开发中防范的方法
1. 防堵跨站漏洞,阻止攻击者利用在被攻击网站上发布跨站攻击语句不可以信任用户提交的任何内容,首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过 ...
- Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息
跨平台这种事情不管多NB, 总要有些与原生系统交互的方法, 比如 Unity3D与iOS消息交互方法. 一: 建立一个空的Unity工程. File --> New Project 二: 编 ...
- （转载）http_build_query用法,挺方便的
(转载)http://www.cnblogs.com/zhja/archive/2012/11/10/2764174.html http_build_query (PHP 5) http_build_ ...
- 计数方法（扫描线）：JLOI 2016 圆的异或并
Description 在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面 积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个 ...
- poj 1265 Area（Pick定理）
Area Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5666 Accepted: 2533 Description ...
- 关于缓存的tips——HTTP权威指南读书心得（十三）
上一章介绍了缓存新鲜度判断的基本原理,本章对于缓存新鲜度判断方法进行一些补充(更新间隔略长略长..). 关于缓存的TIPS 服务器可以通过http定义的几种header对可以缓存数据的存在时间进行控制 ...
- NOI2007 货币兑换
[问题描述] 小 Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和B纪念券(以下简称B券).每个持有金券的顾客都有一个自己的 帐户.金券的数目可以是一个实数.每天 ...
- Yii - 验证和授权(Authentication and Authorization)
1. 定义身份类 (Defining Identity Class) 为了验证一个用户,我们定义一个有验证逻辑的身份类.这个身份类实现[IUserIdentity] 接口.不同的类可能实现不同的验证 ...
- Spring实例化bean的三种方法
1.用构造器来实例化 <bean id="hello2" class="com.hsit.hello.impl.ENhello" /> 2.使用静态 ...