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: ;padding: ;}
#div1{
position: relative;border: 1px solid gray;
width: %;
margin: 20px auto;
height: 500px;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: ;
}
#div1 a{
position: absolute;
z-index: ;
text-decoration: none;
top: %;
display: none;
}
#div1 ul li{
padding: 5px;
list-style: none;
width: 400px;
height: 500px;
float: left;
}
#div1 ul li img{
width: %;
height: %;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[];
var aLi = oUl.getElementsByTagName('li');
var aA = oDiv.getElementsByTagName('a');
var iSpeed = ;
var timer = null;
//计算ul的宽为所有li的宽的和;
oUl.innerHTML += oUl.innerHTML+oUl.innerHTML;
oUl.style.width = aLi[].offsetWidth*aLi.length+'px';
function Slider(){
if (oUl.offsetLeft<-oUl.offsetWidth/) {
oUl.style.left = ;
}else if(oUl.offsetLeft>){
oUl.style.left =-oUl.offsetWidth/+'px';
}
oUl.style.left = oUl.offsetLeft-iSpeed+'px';
}
timer =setInterval(Slider,);
aA[].onclick = function(){
iSpeed = ;
}
aA[].onclick = function(){
iSpeed = -;
}
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timer =setInterval(Slider,);
}
};
</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')[];
var aLi = oUl.getElementsByTagName('li');
var aA = oDiv.getElementsByTagName('a');
var iSpeed = ;//正左负右（改为-1从左到右滚动、1为从右往左滚动）
代码块详解二：怎样修改图片滚动时间快慢
timer =setInterval(Slider,);
aA[].onclick = function(){
iSpeed = ; //控制速度的正负
}
aA[].onclick = function(){
iSpeed = -;
}
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timer =setInterval(Slider,);
}
代码块详解三：哪里替换图片，图片是怎么来的
<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: ;padding: ;}
#div1{
position: relative;border: 1px solid gray;
width: %;
margin: 20px auto;
height: 500px;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: ;
}
#div1 a{
position: absolute;
z-index: ;
text-decoration: none;
top: %;
display: none;
}
#div1 ul li{
padding: 5px;
list-style: none;
width: 400px;
height: 500px;
float: left;
}
#div1 ul li img{
width: %;
height: %;
}
javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果的更多相关文章
- javascript小记四则：用JS写一个滚动横条文字，可以根据需要进行修改；
网页上的一些广告文字,一直会滚动是怎么做到的,今天给大家演示下,非常简单,源码如下(本案例是在.net平台上,但HTML是通用的): <!DOCTYPE html> <html> ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 只有20行Javascript代码！手把手教你写一个页面模板引擎
http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- 如何使用 js 写一个正常人看不懂的无聊代码
如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 用 EPWA 写一个 图片播放器 PicturePlayer
用 EPWA 写一个 图片播放器 PicturePlayer . 有关 EPWA,见 <我发起并创立了一个 EPWA 的 开源项目> https://www.cnblogs.com ...
随机推荐
- monkey----测试中的要求
测试中的要求: (1)导出的log命名以测试机的imei号为主或者是以测试机的编号为主,这样方便找到测试机,避免出现问题后无法找到机器,难以定位问题. 导出的log文件后缀名以.log命名, ...
- 我的微服务观，surging 2.0将会带来多大的改变
Surging 自2017年6月16日开源以来,已收到不少公司的关注或者使用,其中既有以海克斯康超大型等外企的关注,也不乏深圳泓达康.重庆金翅膀等传统行业的正式使用,自2019年年初,surging2 ...
- 对SVN的落地与实践总结
现今最为流行的Git是管理很几套很成熟的分支管理策略.而SVN确实也有,但结合现公司的实际场景还是做了些调整和变动. 一.分支命名规则 所有分支命名采用小写字母 + 数字 + 特殊符号 组成 项目分支 ...
- 3D数学 矩阵常用知识点整理
1.矩阵了解 1)矩阵的维度和记法 (先数多少行,再数多少列) 2)矩阵的转置 行变成列,第一行变成第一列...矩阵的转置的转置就是原矩阵 即 3)矩阵和标量的乘法 ...
- Maven把项目依赖的所有jar包都打到同一个jar中
目录 1 使用maven-shade-plugin 2 推荐: 使用maven-assembly-plugin 3 扩展: Maven安装本地jar包到本地仓库 4 扩展: 手动生成jar包 5 扩展 ...
- 使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...
- Python基础 列表介绍、使用
第3章 学习目标: 列表是什么以及如何使用列表元素.列表让你能够在一个地方存储成组的信息,其中可以只包含几个元素,也可以包含数百万个元素.列表是新手可直接使用的最强大的Python功能之一,它融合了众 ...
- DFS(深度优先搜索)
简介 DFS的过程是一个递归过程,它是从图中的某个顶点开始,首先访问起始点v,然后选择一个与顶点v相邻的且没有被访问的顶点w,以w为起始顶点,在进行DFS,直到图中所有与v相邻的顶点都被访问过为止. ...
- C# 23种设计模式
目录 0).简单工厂模式 1).工厂方法模式 2).抽象工厂模式 3).单例模式 4).构建者模式 5).原型模式 6).适配器模式 7).修饰者模式 8).代理模式 9).外观模式 10).桥接模式 ...
- html学习之路--简单图片轮播
一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...