通过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. [高并发]抢红包设计（使用redis）

    假设一个需求,在某个预告活动中准备了10w个红包,100w人在某个时间点去开抢,每人只能抢1次,如何保证性能和准确性,下面我给出我的一个设计方案,抛砖引玉 分析瓶颈 查询用户是否已参与过活动 获取一个 ...

  2. Fiddler显示服务器IP的方法

    Fiddler默认配置中是看不到服务器IP的,接下来简单介绍下在fiddler上也能够看到请求的服务器IP: 1.Fiddler--->Rules--->Customize Rules , ...

  3. mysql 手册关于修改列字符编码的一个bug

    项目因为历史原因使用了 GBK编码,遇到非GBK编码字符时出现乱码问题,情况比较严重,暂时先打算修改 列的字符编码为 utf8mb4. 查看 mysql 手册: 用 GBK 编码转 utf8 进行说明 ...

  4. 【Asp.net Core】在 Linux 子系统中安装 nginx 并配置反向代理

    上一篇鸟文中,老周已经介绍过在 Ubuntu 子系统中安装 dotnet-sdk 的方法,本文老周给大伙伴们说说安装 nginx 服务,并配置反向代理.同样,老周假设你从来没有用过 Linux,所以老 ...

  5. flannel 网络问题排查

    1. 如果你发现 k8s容器无法访问外网? 重启docker 原因是,docker重启后会重新生成网桥.网络不通的原因是flannel启动后生成的网络覆盖了docker的网络,当你重启docker后, ...

  6. Android 双卡获取当前使用流量在线卡的信息

    最近接触了一个项目,需要获取在线流量卡的信息,下面的方式,可以获取大部分手机的正确手机卡信息. 一  获取获取IMEI public static String getDeviced(int solt ...

  7. 2017-07-11(sync basename dirname )

    sync 在内存中尚未被更新的数据,就会被写入硬盘中:在关机或者重启前,最好多执行几次! basename 获取文件名 dirname 获取目录名

  8. Windbg+VirtualBox双机调试环境配置(XP/Win7/Win10)

    一.下载WDK10 https://developer.microsoft.com/zh-cn/windows/hardware/windows-driver-kit 安装Windows驱动程序工具包 ...

  9. java项目导出war包

    @参考文档 假如项目名称为yanan,进入到yanan目录下打开cmd 执行:jar -cvf yanan.war ./* 命令详解: @参考文档1 @参考文档2 jar:jar工具是个java应用程 ...

  10. CSDN博客测试目录

    经常写博客,但是一般没怎么注意些目录,最近看别人写的博客都有目录,所以我也想在以后写好目录,这样子也方便阅读. 这里就写一个实验: 这里一级目录 这里是一级目录下的文本.林肯公园 这里是1.1目录 这 ...