之前看了很多百度搜索出的东西，十个有九个是不能实用的，个个讲的都不详细，今天详细给大家讲解下关于这个图片“跑马灯”滚动效果，源码如下：

<!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写一个图片左右自由滚动的“跑马灯”效果的更多相关文章

  1. javascript小记四则：用JS写一个滚动横条文字，可以根据需要进行修改；

    网页上的一些广告文字,一直会滚动是怎么做到的,今天给大家演示下,非常简单,源码如下(本案例是在.net平台上,但HTML是通用的): <!DOCTYPE html> <html> ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  4. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  5. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  6. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  7. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  8. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  9. 用 EPWA 写一个 图片播放器 PicturePlayer

    用 EPWA 写一个 图片播放器  PicturePlayer  . 有关 EPWA,见 <我发起并创立了一个 EPWA 的 开源项目>   https://www.cnblogs.com ...

随机推荐

  1. java IO流全面总结

    流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性将流抽象为各种类,方便更直观的进行数据操作. Ja ...

  2. keras实现简单性别识别（二分类问题）

    keras实现简单性别识别(二分类问题) 第一步:准备好需要的库 tensorflow  1.4.0 h5py 2.7.0 hdf5 1.8.15.1 Keras     2.0.8 opencv-p ...

  3. Java开源生鲜电商平台-团购模块设计与架构(源码可下载）

    Java开源生鲜电商平台-团购模块设计与架构(源码可下载) 说明:任何一个电商系统中,对于促销这块是必不可少的,毕竟这块是最吸引用户的,用户也是最爱的模块之一,理由很简单,便宜. 我的经验是无论是大的 ...

  4. HTML 基本语法速查

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  5. knowledge, Experience & Creativity

    In a training session, the trainer asked the audience "knowledge is power, how many of you agre ...

  6. 循环神经网络（Recurrent Neural Network，RNN）

    为什么使用序列模型(sequence model)?标准的全连接神经网络(fully connected neural network)处理序列会有两个问题:1)全连接神经网络输入层和输出层长度固定, ...

  7. 第12章 X.509证书库的Fluent API - IdentityModel 中文文档(v1.0.0)

    存储X.509证书的常见位置是Windows X.509证书存储区.商店的原始API有点神秘(在.NET Framework和.NET Core之间也略有变化). X509类是一个简化的API从所述存 ...

  8. 如何通过get，set方法访问到父类的私有属性

    刚学习继承的时候,总是会有这样的疑问. 子类继承父类时,会继承所有的非私有的属性和方法.那么在用set方法修改父类的私有属性时,怎么没有报空指针异常呢? 后来仔细想过这个问题,既然没有报空指针,那么在 ...

  9. 从On-Premise本地到On-Cloud云上运维的演进

    摘要: 从用户的声音中,我们听到用户对稳定.弹性.透明的诉求,我们也在不断升级ECS的运维能力和体验,助力用户建立主动运维体系,赋能业务永续运行.为了让大家更好的了解和用好ECS弹性计算服务,从本期开 ...

  10. Win10构建Python全栈开发环境With WSL

    目录 Win10构建Python全栈开发环境With WSL 启动WSL 总结 对<Dev on Windows with WSL>的补充 Win10构建Python全栈开发环境With ...