码迷,mamicode.com
首页 > Web开发 > 详细

如何使用JS实现banner图滚动

时间:2017-04-16 11:15:15      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:参数   switch   定时   距离   开始   9.png   运算   全局变量   声明   

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

技术分享

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

技术分享

 

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

技术分享

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

 

 技术分享

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

 技术分享

做好样式后开始写函数

技术分享

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

 

最后的效果图如下

技术分享

 

 

技术分享

如何使用JS实现banner图滚动

标签:参数   switch   定时   距离   开始   9.png   运算   全局变量   声明   

原文地址:http://www.cnblogs.com/Lmey/p/6717856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!