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

<!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. Django基础四(model和数据库)

    上一篇博文学习了Django的form和template.到目前为止,我们所涉及的内容都是怎么利用Django在浏览器页面上显示内容.WEB开发除了数据的显示之外,还有数据的存储,本文的内容就是如何在 ...

  2. TensorFlow之CNN：运用Batch Norm、Dropout和早停优化卷积神经网络

    学卷积神经网络的理论的时候,我觉得自己看懂了,可是到了用代码来搭建一个卷积神经网络时,我发现自己有太多模糊的地方.这次还是基于MINIST数据集搭建一个卷积神经网络,首先给出一个基本的模型,然后再用B ...

  3. .NET 反编译调试神器：dnSpy了解一下

    如果客户环境出了问题,而又无法快速定位问题,可以借助dnSpy进行反编译调试跟踪. 可前往dnSpy官网下载或直接从我的分享链接下载(内置包含.NET Framework 4.7.1,若运行提示需要安 ...

  4. 强化学习(十五) A3C

    在强化学习(十四) Actor-Critic中,我们讨论了Actor-Critic的算法流程,但是由于普通的Actor-Critic算法难以收敛,需要一些其他的优化.而Asynchronous Adv ...

  5. JAVA基础知识（一）—JAVA概述

    JAVA概述 1991 年Sun公司的James Gosling(詹姆斯·高斯林)等人开始开发名称为 Oak 的语言,希望用于控制嵌入在有线电视交换盒.PDA等的微处理器: 1994年将Oak语言更名 ...

  6. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  7. 当心Azure跨区域数据传输产生额外费用

    最近同事发现Azure上一台虚拟机的费用环比增加了一部分.后面仔细检查发现费用来自数据传输, 因为这是早期部署的一台Azure虚拟机(Iaas),我们在本地生成备份,然后通过AzCopy到存储账号的B ...

  8. 【原】Oracle EBS 11无法打开Form及Form显示乱码的解决

    问题:Oracle EBS 11无法打开Form及Form显示乱码 解决: 1.尝试使用jre1.5或1.6安装目录下jre/bin/server目录里的jvm.dll替换JInitiator安装目录 ...

  9. Mysql中concat()、concat_ws()和 group_concat()的用法

    一.CONCAT()函数CONCAT()函数用于将多个字符串连接成一个字符串.使用数据表Info作为示例,其中SELECT id,name FROM info LIMIT 1;的返回结果为+----+ ...

  10. 福利：1H1G2M云服务器限时15元/月,买2送1，一年加6个月只要180元

    平时看文章做测试只能用虚拟机的有福了,现在腾迅做活动,1H1G2M的服务器一个月只需要15元,买2送1,最多可以送6个月. 这个比之前1H1G1M10元一月的要好一些 购买地址