js实现图片轮播切换效果

发布时间：2022-08-19 13:28

最近在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方法

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

js实现图片轮播切换效果

相关推荐