通过JS实现banner图的滚动主要是定时器的应用
先新建好banner图的几张图片，最后一张与第一张用同一个，保证滚动的不间断
改好样式，需注意所有图片要在同行显示，否则不能向左滚动
声明一个函数，为定时器函数，函数内通过switch结构执行，case的值通过声明一个全局变量每次执行函数的时候使其自加，通过执行函数的次数来确定banner图向左移动多少的距离。需注意第5次要使全局变量归零才能使定时器内的switch结构无限循环，在样式表中可以设置过渡效果，使滚动更有节奏感
接下来实现banner的点击切换效果
做好样式后开始写函数
定义一个有参数函数，通过不同的参数运算switch结构，改变banner的向左滚动距离，最下面的num = num1-1是为了让点击后停留的页面不急于滚动，而是等待一次定时器运算之后在进行一次滚动，使停留的banner图达到显示更久的效果。
最后的效果图如下
如何使用JS实现banner图滚动的更多相关文章
-
JS 实现banner图的滚动和选择效果
CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...
-
原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
-
jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
-
JQuery实现banner图滚动
前 言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...
-
JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
-
jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）
banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
-
简单易懂的banner图滚动源代码
banner图左右滚动简单易懂源代码 1 样式展示 css代码: * { padding: 0px; margin: 0px; } .banner { width: 100%; height: 450 ...
-
原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
-
原生JS实现banner图的滚动与跳转
HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...
随机推荐
-
half extents
blue line is hypotenuse From there you can simply linearly add Pi/4 to the angle (45 degrees), then ...
-
在Android中调用WebService
某些情况下我们可能需要与Mysql或者Oracle数据库进行数据交互,有些朋友的第一反应就是直接在Android中加载驱动然后进行数据的增删改查.我个人不推荐这种做法,一是手机毕竟不是电脑,操作大量数 ...
-
jQuery.Validate验证库详解
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
-
手绘经典QQ头像 请让我一个人呆一会
-
TextWatcher编辑框监听器
TextWatcher tw = new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int sta ...
-
Python基础知识学习_Day4
一.函数 1.1函数特性 减少重复代码 使程序可扩展 使程序变得容易维护 1.2函数定义和使用 def 函数名(参数): ...... 函数体 ...... 返回值 函数定义主要特点如下: def:表 ...
-
向MapReduce转换：生成用户向量
分两部分: <span style="font-size:18px;">/*** * @author YangXin * @date 2016/2/21 * @ inf ...
-
tomcat设置端口号,访问指定ip就访问指定项目
1.修改背景: A.通常我们访问我们的web应用格式为: http://ip:端口号/项目名称 例如: http://127.0.0.1:8080/projectName B.如果想直接输入" ...
-
保存一个经常用的Makefile
############################################################# # Generic Makefile for C/C++ Program # ...
-
java Collections.sort()
sort()是Collections中的静态方法,用于对List容器中的元素排序. 如容器list中存储的是Integer对象 List<Integer> list =Arrays.asL ...