您现在的位置是：网站首页> 编程资料编程资料
js实现图片轮播切换效果_javascript技巧_
2023-05-24
353人已围观
简介 js实现图片轮播切换效果_javascript技巧_
最近在b站上学习的时候，学到了一个用原生js实现图片轮播切换效果的实战，码下来收藏
上图是这个小实战的效果图，整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点切换相应图片、点击主菜单显示相应子菜单内容。
html页面布局
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方法 } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- React项目经验总结及遇到的坑_React_
- 深入JS函数中默认参数的使用详解_javascript技巧_
- JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结_javascript技巧_
- JavaScript中let与const命令使用_javascript技巧_
- vue parseHTML源码解析hars end comment钩子函数_vue.js_
- 简述冻结JS对象方法技术_javascript技巧_
- Vue编译器optimize源码分析_vue.js_
- vue编译器util工具使用方法示例_vue.js_
- JavaScript数组实例的9个方法_javascript技巧_
- JS实现图片轮播跑马灯_javascript技巧_
