利用JavaScript做无缝滚动
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li {float: left;width:100px;height: 100px; list-style:none;}
</style>
</head> <body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<a href="javascript:;">中速</a>
<a href="javascript:;">高速</a>
<div id="div1">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
<li><img src="04.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
var odiv=document.getElementById('div1');
var oul=odiv.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
var speed=-2;
oul.innerHTML=oul.innerHTML+oul.innerHTML;
oul.style.width=oli[0].offsetWidth*oli.length+'px';
function move(){
if(oul.offsetLeft<-oul.offsetWidth/2)
{
oul.style.left='0';
}
if(oul.offsetLeft>0)
{
oul.style.left=-oul.offsetWidth/2+'px';
}
oul.style.left=oul.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
odiv.onmouseover=function()
{
clearInterval(timer);
}
odiv.onmouseout=function()
{
timer=setInterval(move,30);
}
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function()
{
speed=+2;
}
document.getElementsByTagName('a')[2].onclick=function()
{
speed=-1;
}
document.getElementsByTagName('a')[3].onclick=function()
{
speed=-4;
}
</script>
</body>
</html>
利用JavaScript做无缝滚动的更多相关文章
- JavaScript实现无缝滚动 原理详细讲解
先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...
- webbrowser内容滚动（javascript内容无缝滚动）
一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...
- 利用background-attachment做视差滚动效果
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...
- Javascript图片无缝滚动
http://www.cnblogs.com/shouce/p/5068787.html
- (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- vue 无缝滚动文字
前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...
- JS无缝滚动
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- Javascript做图片无缝平滑滚动
因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- 移动pc常用Meta标签
移动常用 <meta charset="UTF-8"> <title>{$configInfos['store_title']}</title> ...
- 本地远程访问服务器jupyter
一.前提: 安装Python3 安装Anaconda 配置jupyter notebook 并启动(重点) 二.配置jupyter文件 因为服务器已经安装好anaconda和jupyter,pytho ...
- eas源码示例1
EditUI: this.kdtEntrys.getRow(0).getCell(1).setValue("这个是第一行的第1个单元格的值"); public void loa ...
- Vue push() pop() shift() unshift() splice() sort() reverse() ...
Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. pop() 方法用于删除并返回数组的最后一个元素. shift() 方法用于把数组的第一个元素从其中删除,并返回 ...
- Modbus串行通信
一.Modbus通信协议简介 1. Modbus协议 Modbus 是一个请求/应答协议,并且提供功能码规定的服务.Modbu协议是 OSI 模型第 7 层上的应用层报文传输协议. MODBUS协议支 ...
- python-if判断
1. python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何 ...
- SBC37x交叉编译平台QT+OPENCV【1】
在win7下安装Vbox虚拟机,然后安装Ubuntu10.04版本.上一篇说了根据厂商提供的编译器进行安装. 接下来要说的的环境准备.因为在Linux下对u盘的识别以及目录的共享,还有代码的编译传送运 ...
- 0123简单配置LNMP
简单配置LNMP不怕出现错误,就怕错误不知道出现在哪里?看日值tail -f /var/log/message -- 系统整个的日志tail -f /var/log/nginx/error.log - ...
- mongodb-主从复制
1 主从复制: 一个概念,在sqlserver或者说是mysql也有 2 主从复制解决了哪些问题??? 读写压力:以前是一个mongodb去承载海量的读和写,这样的话终有瓶颈的.使用一主多从, 从服务 ...
- javascript--闭包与this
理解javascript中的闭包与this http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html http: ...