JS定时器的使用--无缝滚动
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1{width:1172px; height:220px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul li{float:left;width:293px; height:220px; list-style:none; }
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer;
var speed=-2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.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';
}; 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;
}
};
</script>
</head> <body>
<a href="javascript:;">向左滚</a>
<a href="javascript:;">向右滚</a>
<div id="div1">
<ul style="position:absolute; left:0; top:0;">
<li><img src="data:images/05.jpg"/></li>
<li><img src="data:images/05.jpg"/></li>
<li><img src="data:images/05.jpg"/></li>
<li><img src="data:images/05.jpg"/></li>
</ul>
</div>
</body>
一开始遇到了个问题,ul的样式是外部样式,所以代码oUl.style.left=oUl.offsetLeft-2+'px'有问题,程序跑不了,style不能取外部样式,谨记!
定时器
开启定时器
setInterval 间隔型
setTimeout 延时型
停止定时器
clearInterval
clearTimeout
JS定时器的使用--无缝滚动的更多相关文章
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- js函数——倒计时模块+无缝滚动
倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- 【js】横/纵向无缝滚动
1.纵向无缝滚动(类似淘宝) ps:存在一个问题,当鼠标移入时,未关闭定时器 <!DOCTYPE html> <html> <head> <meta char ...
- JS 阶段小练习~ 无缝滚动
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
- js基础教程四之无缝滚动
前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...
随机推荐
- ASP.NET MVC 实现AJAX跨域请求的两种方法
通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...
- NOIP2014-普及组复赛-第二题-比例简化
题目描述 Description 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有1498 人,反对的有 902人,那么赞同与反对的比例可以简单的记为14 ...
- Linux系统安装建议
1.推荐使用CentOS-6.x 64位版本:2.分区,推荐分出/usr/local用来存放应用程序./data分区用来存放数据,具体分区建议如下:/boot 100Mswap 4096M (视内存大 ...
- ajax传递的数据类型json传递
$(".del_goods").click(function(){ //删除选中的商品 var clear_data = [];//数组 $("input[name='c ...
- BJFU 1440 fudq的ACM
矩阵快速幂 #include<cstdio> #include<algorithm> using namespace std; ; const int INF =1e9; ; ...
- bootstrap ch2清除浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- Chapter 1 First Sight——28
"Which one is the boy with the reddish brown hair?" 那个红褐色头发的男孩是谁? I asked. I peeked at him ...
- SQL IO监控
DBCC DROPCLEANBUFFERS --清空缓存 SET STATISTICS IO { ON | OFF } SET STATISTICS TIME { ON | OFF }
- Thrift项目Server端开发流程
Thrift项目Server端开发流程 首先,先了解工程中所有包的功能(见下图) 该图为用户中心项目的目录结构,以下依次介绍. 1. src/main/java com.framework:该 ...
- word、pdf、ppt 转为图片
office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像 ...