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

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

如图：

教程效果图：

教程开始：

HTML代码：

 <body>

     <div id="div1">

         <div id="div4">

             <div id="div2">

                 <img src="img/1.jpg" alt="图片1"/>

                 <img src="img/2.jpg" alt="图片2"/>

                 <img src="img/3.jpg" alt="图片3"/>

                 <img src="img/4.jpg" alt="图片4"/>

             </div>

             <div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域-->

         </div>

     </div>

 </body>

CSS代码：

 <style type="text/css">

         div,img{

             margin:;

             padding:;

         }

         img{

             float:left;

             height:100px;

             width:150px;

         }

         #div1{

             width:500px;

             height:100px;

             overflow: hidden;

             border:solid blue 2px;

         }

         #div2,#div3{

             float:left;

         }

         #div4{

             width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/

             float:left;

         }

     </style>

JavaScript代码：

 <script type="text/javascript">

     window.onload=function(){

           var v1=document.getElementById('div1');

           var v2=document.getElementById('div2');

           var v3=document.getElementById('div3');

           v3.innerHTML= v2.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。

           function fun(){

             if(v1.scrollLeft<=0){

                 v1.scrollLeft=600;

             }else{

                 v1.scrollLeft--;

             }

         }

         var fun1=setInterval(fun,10);

         v1.onmouseover = function() {//鼠标经过时  清除定时器  停止图片的滚动

                 clearInterval(fun1)

             };

         v1.onmouseout = function() {//鼠标离开后  继续滚动图片

                 fun1 = setInterval(fun, 10)

             };

     }

 </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. Maven：常用命令

    1, 将第三方的jar包安装到本地仓库中 mvn install:install-file -Dfile=**/*.jar -DgroupId=XXX -DartifactId=YYY -Dversi ...

  2. Spring Security研究（2）-高级web特性

    1, 添加 HTTP/HTTPS 信道安全 <http> <intercept-url pattern="/secure/**" access="ROL ...

  3. WEB前端面试真题 - 2000！大数的阶乘如何计算？

    HTML5学堂-码匠:求某个数字的阶乘,很难吗?看上去这道题异常简单,却不曾想里面暗藏杀机,让不少前端面试的英雄好汉折戟沉沙. 面试真题题目 如何求"大数"的阶乘(如1000的阶乘 ...

  4. Angularjs –– Expressions(表达式)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular的表达式 Angular的表达式和JavaScript代码很像,不过通常A ...

  5. NOIP算法总结与复习

    NOIP算法总结与复习 (看了看李总的蓝皮书,收获颇多,记下此文,以明志--) (一)数论 1.最大公约数,最小公倍数 2.筛法球素数 3.mod规律公式 4.排列组合数,错排 5.Catalan数 ...

  6. Delphi10.2 VCL Forms Application 的构成

    Delphi10.2 项目的构成(File Extensions of Files Generated by RAD Studio) Step1.打开 Delphi10.2,选择[File | New ...

  7. Crayon 线段树或者树状数组

    Crayon Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitStatus ...

  8. Variational Bayes

    一.前言 变分贝叶斯方法最早由Matthew J.Beal在他的博士论文<Variational Algorithms for Approximate Bayesian Inference> ...

  9. 将childNodes返回的数据转化维数组的方法

    //将childNodes返回的数据转化为数组的方法 function convertToArray(nodes){ var array=null; try{ array=Array.prototyp ...

  10. HDU2066 一个人的旅行 最短路基础

    新手熟悉一下迪杰斯特拉... 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...