制作自动轮播图及解析

dome地址:laihuamin.github.io/jsExample/html/fourth2.html

HTML部分:

放置五张图片和五个按钮。

HTML

css部分:

1、外部的包裹框wrap:设置位于视口中央

wrap

2、内容块和图片总体设置

content和img

3、按钮群和每个按钮设置。

button

4、高亮样式设置

current

JS代码部分

1、获取dom元素及定义变量、对象

获取dom元素及定义变量、对象

2、设置展示函数showImg函数;   注意点:

1)index = a 是因为index为全局变量,当按钮切换时,可以记入按钮位置。

2)两个循环遍历是为了整体清空之后再添加新的

3)使用clearInterval是为了让淡入淡出效果,每次都从零开始。

4)使用定时器增加改变透明度和滤镜来增加淡入淡出效果。

showImg函数

3、设置按钮切换

按钮切换

4、设置鼠标划过内容块的停留和鼠标移出的继续效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容