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 ...
随机推荐
- BZOJ_1507_Editor_[NOI2003]_(Splay)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1507 简单区间操作的模板题 1507: [NOI2003]Editor Time Limit: ...
- BZOJ_1036_[ZJOI2008]_树的统计Conut_(树链剖分)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1036 给出一棵树以及各点的权值,对数进行如下三种操作: 1.改变某一节点u的值为t; 2.求节 ...
- ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender
(原文) 昨天在ASP.NET MVC利用PagedList分页(一)的 最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人 ...
- PHPcurl抓取AJAX异步内容(转载)
PHPcurl抓取AJAX异步内容 其实抓ajax异步内容的页面和抓普通的页面区别不大.ajax只不过是做了一次异步的http请求,只要使用firebug类似的工具,找到请求的后端服务url和传值的参 ...
- 树中是否存在路径和为 sum leecode java
https://oj.leetcode.com/problems/path-sum/ /** * Definition for binary tree * public class TreeNode ...
- HW4.26
public class Solution { public static void main(String[] args) { double sum; double item; for(int i ...
- Java的垃圾回收概述
Java语言建立了垃圾收集机制,即GC,用以跟踪正在使用的对象和发现并回收不再使用的对象,垃圾清理势在必行,以下讲述java垃圾收集算法. 1.Java垃圾收集算法的核心思想 Java语言建立了垃圾收 ...
- PHP文件的上传下载
一.文件的上传 1.客户端设置: (1).在 标签中将enctype和method两个属性指明相应的值. Enctype="multipart/form-data"; Method ...
- SQLite 入门教程（四）增删改查，有讲究 （转）
转于: SQLite 入门教程(四)增删改查,有讲究 一.插入数据 INSERT INTO 表(列...) VALUES(值...) 根据前面几篇的内容,我们可以很轻送的创建一个数据表,并向其中插入一 ...
- jetty-如何配置虚拟主机【转】
jetty-如何配置虚拟主机[转]http://weifly.iteye.com/blog/1152688 官方配置:http://wiki.eclipse.org/Jetty/Howto/Confi ...