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 ...
随机推荐
- 我对Burnside定理的理解
我想了想,发现可以证明burnside定理. 置换:n个元素1,2,-,n之间的一个置换表示1被1到n中的某个数a1取代,2被1到n中的某个数a2取代,直到n被1到n中的某个数an取代,且a1,a2, ...
- PowerDesigner 如何生成数据库更新脚本
最近在学习使用PowerDesigner 这个数据库设计工具,发现真的很强大,可以做很多事情,其中就涉及到如果数据库要进行更新了怎么办,主要是增加表,最麻烦的是修改字段名称,增加字段等操作,遇到主要的 ...
- 获取和设置select和checkbox的值
if ($("input[name = 'recpower']").prop("checked") == true) //获取checkbox值 { data. ...
- 2D游戏编程2--windows高级编程
windows应用程序布局 编译流程 响应菜单事件消息 菜单消息处理实例: LRESULT CALLBACK WindowProc(HWND hwnd, UINT msg, WPARAM wpar ...
- Bzoj 1901: Zju2112 Dynamic Rankings 主席树,可持久,树状数组,离散化
1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 6321 Solved: 2628[Su ...
- [LeetCode] 287. Find the Duplicate Number 解题思路
Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...
- 手机终于能连接android studio
折腾了三天,终于能连上了,网上各种方法都试了,就是不行,结果安装了腾迅安全管家,自动安装了手机驱动就好了,原来一直都是驱动惹的祸啊......
- php 获取目录下文件列表
可以用 scandir() 函数 例如: http://www.w3school.com.cn/php/func_directory_scandir.asp
- 简单了解View是What?
Android UI界面架构 每个Activity包含一个PhoneWindow对象,PhoneWindow设置DecorView为应用窗口的根视图.在里面就是熟悉的TitleView和Content ...
- HTML5 汽泡效果
又到了晚上了,精神只有在晚上的时候才能爆发,可能程序员的命吧.废话就不多说了,今天我为大家带来的是一个气泡的效果. 代码下载 下面请看效果图