JavaScript小记五则:用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <style> *{margin: 0;padding: 0;} #div1{ position: relative;border: 1px solid gray; width: 100%; margin: 20px auto; height: 500px; overflow: hidden; } #div1 ul{ position: absolute; left: 0; } #div1 a{ position: absolute; z-index: 2; text-decoration: none; top: 45%; display: none; } #div1 ul li{ padding: 5px; list-style: none; width: 400px; height: 500px; float: left; } #div1 ul li img{ width: 100%; height: 100%; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var aA = oDiv.getElementsByTagName('a'); var iSpeed = 1; var timer = null; //计算ul的宽为所有li的宽的和; oUl.innerHTML += oUl.innerHTML+oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length+'px'; function Slider(){ if (oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left = 0; }else if(oUl.offsetLeft>0){ oUl.style.left =-oUl.offsetWidth/2+'px'; } oUl.style.left = oUl.offsetLeft-iSpeed+'px'; } timer =setInterval(Slider,30); aA[0].onclick = function(){ iSpeed = 1; } aA[1].onclick = function(){ iSpeed = -1; } oDiv.onmouseover = function(){ clearInterval(timer); } oDiv.onmouseout = function(){ timer =setInterval(Slider,30); } }; </script> <div id="div1"> <ul> <li><img src="../JPG/01.jpg"></li> <li><img src="../JPG/02.jpg"></li> <li><img src="../JPG/03.jpg"></li> <li><img src="../JPG/04.jpg"></li> </ul> <a href="javascript:;" style="left:10px;"><</a> <a href="javascript:;" style="right:10px;">></a> </div> </body> </html>
标注:头部说明
1、头部;<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />这条可以在博客园搜索下,里面讲的很详细;
2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">:这句话的意思是强制IE浏览器使用谷歌框架进行渲染,简单的说这跟浏览器的兼容性有关;
3、<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>:这一条有兴趣的话可以到CSDN上查找相关说明,非常详细;
代码块详解一:怎样改变图片滚动的方向
var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var aA = oDiv.getElementsByTagName('a'); var iSpeed = 1;//正左负右(改为-1从左到右滚动、1为从右往左滚动)
代码块详解二:怎样修改图片滚动时间快慢
timer =setInterval(Slider,30); aA[0].onclick = function(){ iSpeed = 1; //控制速度的正负 } aA[1].onclick = function(){ iSpeed = -1; } oDiv.onmouseover = function(){ clearInterval(timer); } oDiv.onmouseout = function(){ timer =setInterval(Slider,30); }
代码块详解三:哪里替换图片,图片是怎么来的
<li><img src="../JPG/01.jpg"></li> <li><img src="../JPG/02.jpg"></li> <li><img src="../JPG/03.jpg"></li> <li><img src="../JPG/04.jpg"></li>
图片路径根据个人web中存放的图片路径进行修改,放多少都没问题;
代码块详解四:修改图片大小,控制图片的高宽,找到对应修改即可
*{margin: 0;padding: 0;} #div1{ position: relative;border: 1px solid gray; width: 100%; margin: 20px auto; height: 500px; overflow: hidden; } #div1 ul{ position: absolute; left: 0; } #div1 a{ position: absolute; z-index: 2; text-decoration: none; top: 45%; display: none; } #div1 ul li{ padding: 5px; list-style: none; width: 400px; height: 500px; float: left; } #div1 ul li img{ width: 100%; height: 100%; }
分类:
JavaScript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库