如何使用JS实现banner图滚动

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

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

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

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

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

做好样式后开始写函数

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

最后的效果图如下

如何使用JS实现banner图滚动相关推荐

原生JS和jQuery实现banner图滚动那些事
前言阿q 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码首先,创建基本 ...
JQuery自定义插件详解之Banner图滚动插件
前言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）
banner图的滚动效果动画最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
无限滑动的banner图，中间显示大图两边显示一部分，无限滚动
banner图需求中间图片要大两边要显示一部分无限滚动首页代码 MainActivity package com.m.live.myapplication;import android.sup ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
JS实现图片循环滚动
之前在前端的时候有遇到这样一个问题,实现 JS 图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器 ...
HTML实现banner图切换
首先呢,我们做出来的效果去下图,这里只是简单的写的文字,如果需要更好的话,可以自己添加或修改.(这里图片大小没有统一,有一丢丢影响效果) 接下来我们来看看详细的代码 HTML部分: 这里主要设置了三个 ...
【Vue.JS】纯 Vue.js 制作甘特图
效果图在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
js之焦点图轮播特效
js之焦点图轮播特效一.原理介绍焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...

如何使用JS实现banner图滚动

如何使用JS实现banner图滚动相关推荐

最新文章

热门文章