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 ...
随机推荐
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！
转自:http://www.cnblogs.com/lt-style/p/3457399.html 数据表: 学生表:学生编号.姓名.性别.班级编号.年龄 班级表:班级编号.班级名称 开发过程: 1. ...
- 搜索（DLX重复覆盖模板）：HDU 2295 Radar
Radar Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- Delphi-idHttp-JSON用法
从国外网站抄来的代码 Delphi source: http := TIdHttp.Create(nil);http.HandleRedirects := True;//允许头转向http.ReadT ...
- 进程与线程（四） linux进程间通信的方式总结
1概述: 上文说到,每个进程都有自己的地址空间,包括什么呢?向下生长得栈,向上生长的堆,代码段,数据段等,这些都是进程私有的,如何实现通信的呢?通信需要媒介,这个媒介很重要. 对于研发人员来说,进程不 ...
- 根据地址查询经纬度.html
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>根据地址查询经纬度</t ...
- uva 1030 - Image Is Everything(迭代更新）
题目链接:uva 1030 - Image Is Everything 题目大意:有一个最大为n*n*n的立方体的一个不规整立体,由若干个1*1*1的小正方体构成(每一个小正方体被涂成不同的颜色),给 ...
- maven项目文件乱码问题
今日碰到maven项目中的一个资源文件出现乱码,排查发现是在.setting文件夹下的org.eclipse.core.resources.prefs文件导致的. 修改前的编码规则如下: <sp ...
- [rxjs] Throttled Buffering in RxJS (debounce)
Capturing every event can get chatty. Batching events with a throttled buffer in RxJS lets you captu ...
- BZOJ 2754([SCOI2012]喵喵叫的星球-统计序列的后缀阵列中子序列出现次数)
2754: [SCOI2012]喵喵叫的星球 Time Limit: 20 Sec Memory Limit: 128 MB Submit: 805 Solved: 380 [id=2754&qu ...
- 自主创建tcpdump/wireshark pcap文件
pcap文件格式是bpf保存原始数据包的格式,很多软件都在使用,比如tcpdump.wireshark等等,了解pcap格式可以加深对原始数据包的了解,自己也可以手工构造任意的数据包进行测试. p ...