利用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 ...
随机推荐
- PAT_A1152#Google Recruitment
Source: PAT A1152 Google Recruitment (20 分) Description: In July 2004, Google posted on a giant bill ...
- PAT_A1116#Come on! Let's C
Source: PAT A1116 Come on! Let's C (20 分) Description: "Let's C" is a popular and fun prog ...
- 理解Linux CPU负载和 CPU使用率
CPU负载和 CPU使用率 这两个从一定程度上都可以反映一台机器的繁忙程度. cpu使用率反映的是当前cpu的繁忙程度,忽高忽低的原因在于占用cpu处理时间的进程可能处于io等待状态但却还未释放进入w ...
- 利用IO多路复用，使用linux下的EpollSelector实现并发服务器
import socket import selectors # IO多路复用选择器的模块 # 实例化一个和epoll通信的选择器 epoll_selector = selectors.EpollSe ...
- elasticsearch 权威指南排序阅读笔记(六)
默认排序 默认查询是通过_source 准确性权重来排序 字段排序 { "query":{ "match":{ "productName": ...
- mybatis使用-高级用法(二)
新建学生表和学生证表 --学生表 CREATE TABLE student( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'id', `nam ...
- elasticsearch6.4中文文档
男朋友翻译的,我这边做一个查看入口,分享给大家,O(∩_∩)O哈哈~ 版权声明:本文为博主原创文章,无需授权即可转载,甚至无需保留以上版权声明,转载时请务必注明作者. https://blog.csd ...
- 在Linux中samba server的配置
1.查看是否安装samba服务 # rpm –qa |grep samba 2.若没安装,则安 # yum install samba 执行4次此命令 3.查看安装的samba文件 #rpm–qa | ...
- Scala入门到精通——第一节 Scala语言初步
本节主要内容 Scala简单介绍 为什么要学习Scala Scala语言初步 1. Scala简单介绍 Scala(Scala Language的简称)语言是一种能够执行于JVM和.Net平台之上的通 ...
- hdoj 3488 Tour 【最小费用最大流】【KM算法】
Tour Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Total Submi ...