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" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- 如何查找JS错误
- js实现分页
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- ExtJs中XTemplate使用
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- js数组去重复
- pandasjson格式(对pandas处理json数据的方法详解)
- js定时器几分钟执行(利用JS定时器实现元素移动)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- json和xml比较与区别
- 怎么用织梦上传源码(如何把织梦dedecms数据生成json)
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- js移动端菜上下滑动效果(JS实现移动端上下滑动一次一屏)
- 纯css和js有什么区别(CSS语法与JSON、JS对象区别比较)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
热门推荐
- html5字体倾斜代码(html5响应式开发自动计算fontSize的方法)
- 只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)
- python线程安全队列(Python 限制线程的最大数量的方法Semaphore)
- mysql多核cpu利用(mysql CPU高负载问题排查)
- sqlserver常见函数(SQL Server之JSON 函数详解)
- tomcat部署web项目常见问题(关于tomcat部署应用无法访问前端页面的问题)
- python监控系统界面(Python远程视频监控程序的实例代码)
- ASP.NET给图片加图片水印
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- tomcat作用及原理(详解Tomcat常用的过滤器)