我的第一篇文章、哈哈、有点小鸡冻。

 之前在百度搜索“图片轮播”、“图片滚动”，结果都是那种可以左右切换的。也是我们最常见的那种。可能是搜索 关键字的问题吧。

如图：

教程效果图：

教程开始：

HTML代码：

  1.  <body>
  2.      <div id="div1">
  3.          <div id="div4">
  4.              <div id="div2">
  5.                  <img src="img/1.jpg" alt="图片1"/>
  6.                  <img src="img/2.jpg" alt="图片2"/>
  7.                  <img src="img/3.jpg" alt="图片3"/>
  8.                  <img src="img/4.jpg" alt="图片4"/>
  9.              </div>
  10.              <div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域-->
  11.          </div>
  12.      </div>
  13.  </body>

CSS代码：

  1.  <style type="text/css">
  2.          div,img{
  3.              margin:;
  4.              padding:;
  5.          }
  6.          img{
  7.              float:left;
  8.              height:100px;
  9.              width:150px;
  10.          }
  11.          #div1{
  12.              width:500px;
  13.              height:100px;
  14.              overflow: hidden;
  15.              border:solid blue 2px;
  16.          }
  17.          #div2,#div3{
  18.              float:left;
  19.          }
  20.          #div4{
  21.              width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/
  22.              float:left;
  23.          }
  24.      </style>

JavaScript代码：

  1.  <script type="text/javascript">
  2.      window.onload=function(){
  3.            var v1=document.getElementById('div1');
  4.            var v2=document.getElementById('div2');
  5.            var v3=document.getElementById('div3');
  6.  
  7.            v3.innerHTML= v2.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。
  8.            function fun(){
  9.              if(v1.scrollLeft<=0){
  10.                  v1.scrollLeft=600;
  11.              }else{
  12.                  v1.scrollLeft--;
  13.              }
  14.          }
  15.  
  16.          var fun1=setInterval(fun,10);
  17.  
  18.          v1.onmouseover = function() {//鼠标经过时  清除定时器  停止图片的滚动
  19.                  clearInterval(fun1)
  20.              };
  21.          v1.onmouseout = function() {//鼠标离开后  继续滚动图片
  22.                  fun1 = setInterval(fun, 10)
  23.              };
  24.      }
  25.  
  26.  </script>

教程结束。

本人新手一个、请大神们多多指教。

此处省略一万字...

使用JS实现图片轮播滚动跑马灯效果的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  3. 使用JS实现图片轮播（前后首尾相接）

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  4. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  5. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  6. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  8. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  9. 原生js实现简单轮播的淡入淡出效果

    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s; ...

随机推荐

  1. 我的Spring学习记录（一）

    spring是一个框架,一个我理解为对象的大熔炉,它生产着各种bean,还可以对生产的对象进行加工. 这里有些概念需要理解一下,就是IOC和DI以及AOP,接下来,我们进入主题. spring简介 上 ...

  2. SQL三类语句

    1. DDL (Data Definition Language, 数据定义语言) CREATE: 创建数据库和表等对象 DROP: 删除数据库和表等对象 ALTER: 修改数据库和表等对象的结构 2 ...

  3. SpringMVC Restful api接口实现

    [前言] 面向资源的 Restful 风格的 api 接口本着简洁,资源,便于扩展,便于理解等等各项优势,在如今的系统服务中越来越受欢迎. .net平台有WebAPi项目是专门用来实现Restful ...

  4. Hadoop面试题目

    1.Hadoop集群可以运行的3个模式? 单机(本地)模式 伪分布式模式 全分布式模式 2.  单机(本地)模式中的注意点? 在单机模式(standalone)中不会存在守护进程,所有东西都运行在一个 ...

  5. MonoDeveloper 快捷键

    注:环境是Unity3D 5.0.2f1自带的MonoDevelop Ctrl+X 剪切功能.另外,光标放在一行的任意位置(不选中任何内容),使用快捷键,将把这一行剪切并删除此行,这个特性非常好用 C ...

  6. 理解ES6——Promise

    浏览器的控制台真是个好东西,啥都能干: 这就是Promise,能看出来啥? 1.是个构造函数,可以new实例. 2.自身有一些方法:all.race.reject.resolve... 3.原型上有c ...

  7. 我真的知道JavaScript吗？

    JavaScript 说说JavaScript 接触JavaScript时间其实已经不短了,之前一直是半瓶酱油,东凑西凑的收集相关的知识.并没有完整系统的学习过JavaScript,觉得JavaScr ...

  8. MyBatis 关系映射XML配置

    关系映射 在我看来这些实体类就没啥太大关联关系,不就是一个sql语句解决的问题,直接多表查询就完事,程序将它设置关联就好 xml里面配置也是配置了sql语句,下面给出几个关系的小毛驴(xml) 一对多 ...

  9. zoj3953 Intervals 最大不重叠区间加强版 zoj排名第一~

    Intervals Time Limit: 1 Second      Memory Limit:65536 KB      Special Judge Chiaki has n intervals ...

  10. cocos2dx - v2.3.3编辑器简单使用及不同分辨率适配

    准备工具 Cocos 引擎当前最新版本:v2.3.3       官网下载地址: http://www.cocos.com/download/ 前述:cocos自带UI编辑器在最新的版本有了很大的改动 ...