dome地址:laihuamin.github.io/jsExample/html/fourth2.html
HTML部分:
放置五张图片和五个按钮。
css部分:
1、外部的包裹框wrap:设置位于视口中央
2、内容块和图片总体设置
3、按钮群和每个按钮设置。
4、高亮样式设置
JS代码部分
1、获取dom元素及定义变量、对象
2、设置展示函数showImg函数; 注意点:
1)index = a 是因为index为全局变量,当按钮切换时,可以记入按钮位置。
2)两个循环遍历是为了整体清空之后再添加新的
3)使用clearInterval是为了让淡入淡出效果,每次都从零开始。
4)使用定时器增加改变透明度和滤镜来增加淡入淡出效果。
3、设置按钮切换
4、设置鼠标划过内容块的停留和鼠标移出的继续效果。