轮播图 - 原生js - 原理

boume 发布于 12-14 14:09 浏览:96 类型:原创 - 随笔 分类:JavaScript - javascript学习 作者原创 版权保护

轮播图需要有的功能↓
a:鼠标不参与时图片需要自己播放(定时器 + 切换下一个)
b:鼠标移入图片停止播放(清除定时器)
c:鼠标移出图片恢复自动播放(清除之前的自动播放,重新开启自动播放!)
d:图片变化的情况下相应的按钮会发生样式的变化
e:鼠标点击按钮,图片停止播放,同时切换到与按钮对应的图片上,同时按钮的样式发生变化
f :鼠标移出按钮图片恢复自动播放(onmouseout)
g:鼠标点击左右按钮,轮播图切换(onclick)
h:底部按钮数量可随着图片的数量改变

先分析一下,需要设置哪些函数↓
1.自动播放的定时器 - timer(包含nextfn)
2.清除定时器 - cleartimer(包含timer)
3.清除之前的自动播放,重新开启自动播放 - clear(包含cleartimer、timer)
4.按钮切换样式 - changestyle
5.图片切换下一张 - nextfn(包含clear、changestyle)
6.图片切换上一张 - lastfn(包含clear、changestyle)

部分代码有借鉴:http://www.qdfuns.com/notes/34610/cda79c44bbd155e9de0bee9b3c0104ae.html

标签:
z
给个赞 14 人点赞
收藏 2 人收藏
boume 作者

sss

作者最新