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

<!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. Caffe初学者第一部：Ubuntu14.04上安装caffe(CPU）+Python的详细过程 (亲测成功, 20180524更新)

    前言: 最近在学习深度学习,最先要解决的当然是开源框架的环境安装了.之前一直在学习谷歌的Tensorflow开源框架,最近实验中需要跟别人的算法比较,下载的别人的代码很多都是Caffe的,所以想着搭建 ...

  2. json与javabean之间的转化

    接着上一个http://www.cnblogs.com/ya-qiang/p/9009134.html随笔,继续介绍json与java对象之间的转化 一.java普通对象和json字符串的互转 jav ...

  3. 记录遭遇挖矿程序kthrotlds的失败处理经历

    1 发现问题 在腾讯云上购买了一个centos7的服务器,平时用来练手,偶尔也安装一些程序进行测试,上面安装了mysql和redis,前段时间数据库经常掉线,连不上,到腾讯云后台进行查看,通过服务器实 ...

  4. zabbix微信报警信息优化模板

    --------------------------------告警模板1-------------------------------------- 默认标题 告警项目: {TRIGGER.NAME ...

  5. redis一致性hash算法理解

    一般算法: 对对象先hash然后对redis数量取模,如果结果是0就存在0的节点上. 1.2同上,假设有0-3四个redis节点.20个数据: 进行取模后分布如下: 现在因为压力过大需要扩容,增加一台 ...

  6. SpringCloud学习系列之二 ----- 服务消费者(Feign)和负载均衡(Ribbon)使用详解

    前言 本篇主要介绍的是SpringCloud中的服务消费者(Feign)和负载均衡(Ribbon)功能的实现以及使用Feign结合Ribbon实现负载均衡. SpringCloud Feign Fei ...

  7. PHP开发模式之-单例模式

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class  Db{ private function __construct(){} private static ...

  8. geoserver矢量瓦片发服务前端展示偏移问题解决

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 在之前的<项目角度谈矢量切片运用以及Geoserver处理自定义 ...

  9. Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考

    背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞════════ ...

  10. sublime实现markdown浏览器预览

    效果预览 实现 首先下载插件OmniMarkupPreviewer 方法:ctrl + shift + P 安装完成后搜索'OmniMarkupPreviewer'双击即可 下载完成后新建.md文件 ...