JavaScript实例每日一练1——JS实现轮播图片

原创 程序媛_小发 教程 JS实例每日一练 829阅读 2018-06-07 20:48:28 举报

前言:我之前在学JavaScript的时候,基本上都是看的《JavaScript高级程序设计》,而锻炼JS的例子也基本上是书上的小例子,每章看完了也很容易忘记一些知识点,缺乏实战的锻炼,于是就在网上找一些实例做做并且根据例子做一些拓展实例会比单纯的了解理论知识好多了,于是就有了这个专题文章《JavaScript实例每日一练》,和我一起通过实例深入了解JavaScript的“奥秘”吧,本专题文章不定期更新~

JS实现轮播图片

一、简单介绍

轮播图片是一组为了向浏览网页的用户展示图片信息的会自动播放的图片。在许多网站中你都会看到它的身影。
例如:
淘宝

前端网

二、特点

轮播图片一般具备以下几个特点:
1、点击左右两边的箭头切换图片
2、当鼠标移出图片范围,自动切换下一张图片;当鼠标移入图片范围,停止切换下一张图片
3、切换到某一张图片时,底部的按钮样式也跟着改变
4、点击按钮即会切换到相应位置的图片

三、轮播图片原理

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

图片来源:https://www.cnblogs.com/LIUYANZUO/p/5679753.html

四、让我们开始吧

本次实例的最终效果为(点击链接查看):
https://augustwuli.github.io/JSDaily/PlayImage/

文件目录
-index.html
-main.css
-main.js

1、HTML结构

index.html
首先我们用父容器“container”存放所有的内容,子容器“list”存放图片,子容器“buttons”存放按钮

2、CSS样式

3、JS实现功能

(1)点击左右两边的箭头切换图片

运行后会发现,一直点击右箭头,在第5张图片之后会出现空白,无法切换回第1张。
可以按F12打开控制台查看list容器的left变化。
如图:

每张图片的list容器left值如下图:

当left值小于2400时,因为没有第6张图片就出现空白,所以这里我们需要对偏移量做一个判断。
应该在animate函数内加上:

(2)当鼠标移出图片范围,自动切换下一张图片;当鼠标移入图片范围,停止切换下一张图片。
这个功能我们需要用到window对象的setInterval()间歇调用方法,所谓的间歇调用就是每隔指定的时间就执行一次代码。
在这我们需要鼠标移出图片范围,每隔指定时间就切换到下一张图片。
在代码中插入:

当鼠标移入图片范围时,清除定时器

(3)切换到某一张图片时,底部的按钮样式也跟着改变

(4)点击按钮即会切换到相应位置的图片

至此,我们就完成了轮播图片的基本功能。
(5)扩展功能
为轮播图片增加切换的动画效果

五、扩展实例

本篇文章的扩展实例为b站首页的登录处的模拟弹幕。
如图所示:

此实例也是运用了和轮播图片一样的原理,都是用css隐藏图片,然后用js实现切换图片。

六、源码下载

(喜欢的话记得star一下仓库哦)
轮播图片和扩展实例代码下载地址:
轮播图片:
https://github.com/Augustwuli/JSDaily/tree/master/PlayImage
扩展实例:
https://github.com/Augustwuli/JSDaily/tree/master/bilibiliLogin

七、参考博客

手把手原生js简单轮播图:
https://www.cnblogs.com/LIUYANZUO/p/5679753.html

评论 ( 3 )
最新评论
程序媛_小发 2F 2018-07-26 17:19:31 3F

蟹蟹

Now丶 2018-07-23 22:43:17 2F

很细致,我也在学习中,期待楼主这个系列的之后的更新

程序媛_小发 2018-06-07 20:57:11 1F

扩展实例: