通过JS实现banner图的滚动主要是定时器的应用

先新建好banner图的几张图片，最后一张与第一张用同一个，保证滚动的不间断

改好样式，需注意所有图片要在同行显示，否则不能向左滚动

声明一个函数，为定时器函数，函数内通过switch结构执行，case的值通过声明一个全局变量每次执行函数的时候使其自加，通过执行函数的次数来确定banner图向左移动多少的距离。需注意第5次要使全局变量归零才能使定时器内的switch结构无限循环，在样式表中可以设置过渡效果，使滚动更有节奏感

接下来实现banner的点击切换效果

做好样式后开始写函数

定义一个有参数函数，通过不同的参数运算switch结构，改变banner的向左滚动距离，最下面的num = num1-1是为了让点击后停留的页面不急于滚动，而是等待一次定时器运算之后在进行一次滚动，使停留的banner图达到显示更久的效果。

最后的效果图如下

如何使用JS实现banner图滚动的更多相关文章

  1. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  2. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  3. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  4. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  5. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  6. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  7. 简单易懂的banner图滚动源代码

    banner图左右滚动简单易懂源代码 1 样式展示 css代码: * { padding: 0px; margin: 0px; } .banner { width: 100%; height: 450 ...

  8. 原生态JS实现banner图的常用所有功能

    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...

  9. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

随机推荐

  1. MVC 统一异常处理

    在出现异常时,我们不希望将错语的原因让客户看见,常常会做一个404错误页面,将所有发生的异常都跳至该页面,并把异常信息写在日志中.步骤如下: 1.让我们看看Global.asax页面Applicati ...

  2. Asp.Net Core Use MongoDB

    前几天在网上想找一下Asp.Net Core使用MongoDB相关的文章,也看了几篇,发现都是在写简单的例子,这样的例子是不能用在生产环境的,不能用的生产环境的.封装一个东西一定是建立在你对这个东西足 ...

  3. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  4. 安卓Acitivity的启动模式

    活动的四大启动模式 Ps:除了standar模式外,其他启动模式都要在AndroidManifest.xml中设置 android:lauchMode的值 安卓活动的启动模式(LaunchMode)有 ...

  5. ftp上传文件,本地安装了，服务器上也需要在也安装一个ftp

    服务器需要配置FTP服务: 你说的在你自己电脑上安装的只是一个FTP软件,用于连接远程服务器进行上传和下载文件的. 追问 在本地已经安装了,链接的话要在服务器上也安装一个吗? 追答 额,你有FTP服务 ...

  6. FreeMarker 集合遍历

    freemarker list (长度,遍历,下标,嵌套,排序) 1. freemarker获取list的size : Java ArrayList<String> list = new ...

  7. Selenium自动化测试脚本中三种等待时间简介

    为了提高脚本的稳定性,我们需要在脚本中增加等待时间 第一种:强制等待 Thread.sleep():固定休眠时间设置,Java的Thread类里提供了休眠方法sleep,导入包后就能使用 sleep( ...

  8. isinstance和issubclass、动态模块导入、异常处理

    一.isinstance和issubclass isinstance:判断某个对象是否是某个类的实例,返回True或Flase issubclass:判断某个类是否是某个类的子类. 例如: class ...

  9. JXLS使用方法（文件上传读取）xlsx文件读取

    1.官方文档:http://jxls.sourceforge.net/reference/reader.html 2.demo git地址:https://bitbucket.org/leonate/ ...

  10. JS动态获取当前时间

    HTML部分: <div class="div"> <div id="div"> </div> </div> C ...