js实现图片轮播切换效果
最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏
文章图片
【js实现图片轮播切换效果】上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点切换相应图片、点击主菜单显示相应子菜单内容。
html页面布局
item item item item
文章图片
文章图片
js绑定事件
//封装一个代替getElementById()的方法function byId(id){//对id的类型做判断return typeof(id)==="string"?document.getElementById(id):id; }//封装切换图片的函数(图片和圆点是配套的,图片有多少张圆点就有多少个,图片切换到第几张,圆点就到第几个)function changeImg(){//遍历banner下所有的div,将其隐藏for(var i = 0; i=len){index=0; }//切换图片changeImg(); },2000); }//自动在main上触发鼠标离开的事件,让图片自动切换,即在鼠标还没有滑过图片时,图片就睡自动切换main.onmouseout(); //调用onmouseout方法}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- js实现点击切换和自动播放的轮播图
- C语言中如何实现单链表删除指定结点
- iview+vue实现导入EXCEL预览功能
- 投稿|拼多多“百亿补贴”UP主?
- HashMap 实现原理与源码分析
- Spring Boot核心原理实现及核心注解类
- 难以想象SpringBoot中的条件注解底层居然是这样实现的
- 投稿|困在先进企业里的飞书
- Java 中的对象池实现
- 实现React过程中一次有趣的问题排查经历