js 定时切换图片(JavaScript定时器实现无缝滚动图片)
类别:编程学习 浏览量:608
时间:2022-03-30 20:23:36 js 定时切换图片
JavaScript定时器实现无缝滚动图片本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下
文本:
- setInterval 开启间隔型定时器
- clearTimeout 关闭定时器
- offsetWidth 获取宽度
- offsetLeft 获取向左偏移量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝移动</title> <style> *{margin: 0; padding: 0;} #li1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! li1 的位置是相对的 */ background: pink; overflow: hidden} /* !!! overflow: hidden */ #li1 ul{position: absolute; left:0; top:0;} /* !!! ul 的 position:绝对的,控制left的值 */ #li1 ul li{float:left; width:130px; height:170px; list-style: none} </style> <script> window.onload=function () { var oli=document.getElementById('li1'); var oUl=oli.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var speed = 2; oUl.innerHTML+=oUl.innerHTML; // 相当于 4*2 张图像在移动 oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth 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'; // !!!!!!!! offsetLeft } var Timer1= setInterval(Move, 30); // setInterval 开启间隔型定时器 oli.onmouseover=function () { clearTimeout(Timer1); }; oli.onmouseout=function () { Timer1=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> <li id="li1"> <ul> <li><img src="img/aa.jpg" alt="js 定时切换图片(JavaScript定时器实现无缝滚动图片)" border="0" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- packagejson怎么使用(最全的package.json解析)
- js音乐脚本怎么做(js实现网页音乐播放器)
- node.js缓存区(如何利用node实现静态文件缓存详解)
- js函数对象
- ExtJs 中Viewport 的使用
- js手写数组去重(JS对象数组去重的3种方法示例及对比)
- js 全局变量与局部变量
- js获取上个月第一天和最后一天
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- nodejs json文件读写(nodejs将JSON字符串转化为JSON对象报错的解决)
- js数组去重复
- js中substring的用法、与substr的区别
- js验证身份证号
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- MVC中JSON字符长度超出限制
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
热门推荐
- C#中的深拷贝与浅拷贝的区别
- 网站503错误
- python中统计一个字符出现的次数(Python统计一个字符串中每个字符出现了多少次的方法字符串转换为列表再统计)
- 微信html5页面怎么制作(HTML5中外部浏览器唤起微信分享功能的代码)
- 查询mysql 死锁(MySQL线上死锁分析实战)
- dedecms如何使用(DedeCMS织梦服务器网站目录安全设置经验分享)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- dedecms怎么加页面(dedecms自定义内容模型在首页、列表页及内容调用标签的方法)
- yield方法可以使一个线程停止运行(Yii2.0框架模型添加/修改/删除数据操作示例)
- dedecms标签调用(dedecms获取文档当前栏目所在目录链接URL)