通过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. [国嵌攻略][066][ARP协议实现]

    以太网通讯 在计算机网络中,数据发送的过程就是把数据按照各层协议层层封装的过程.在这个过程中,最终要使用的协议通常是以太网协议(数据链路层协议). 以太网包格式 目的MAC地址:接收者的物理地址(6字 ...

  2. HDU 4763 Theme Section

    题目: It's time for music! A lot of popular musicians are invited to join us in the music festival. Ea ...

  3. A glance at endpoint security

    Last year hackers stole millions from Taiwan First Commercial bank's ATMs without using a card. This ...

  4. php匹配图片、视频文件、音乐文件的正则表达式

    $pattern_video = "/(src)=(\\\?)([\"|']?)([^ \"'>]+\.(swf|flv|mp4|rmvb|avi|mpeg|ra| ...

  5. 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化

    http://www.mdaima.com/jingyan/20.html 最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下 ...

  6. 高级设置电脑系统windows7防火墙出错代码0×6D9原因与解决技巧

    高级设置windows防火墙能够更好的保护电脑系统安全,在电脑系统windows7设置过程中难免会遇到某些问题,有用户在安装MRGT后想要打开SNMP的161端口,但在打开高级安全windows防火墙 ...

  7. DEDECMS中的几个常见的自定义常量DEDEMEMBER等位置

    http://www.dede58.com/a/dedejq/3567.html dedecms新建栏目时默认都是允许投稿的,可以投稿本来对网站来说是件好事,但是dedecms是开源的,使用太广泛了, ...

  8. Ajax常用实例

    摘录自:http://www.cnblogs.com/gaopeng527/p/4459622.html 1. 级联下拉列表 例1.1 级联下拉列表. (1)编写AjaxRequest.js文件,并将 ...

  9. PHP数据核心：Zend HashTable详解

    最近看了篇关于php内的hashtable的文章,PHP数据存储的核心,各种常量.变量.函数.类.对象等都用它来组织的.转载地址 http://www.phppan.com/2009/12/zend- ...

  10. 谈Ajax的Get和Post的区别

    Get方式:   用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行 ...