JS-案例-全js轮播图

最新推荐文章于 2024-12-12 17:20:15 发布

原创

最新推荐文章于 2024-12-12 17:20:15 发布 · 539 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JS #轮播图 #封装

图片预加载封装

//Utils.js
 
//封装 预加载图片
var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {//图片地址  回调函数
            var img=new Image();
            img.num=0;//初始化num为0 图片数
            img.imgList=[];//存放图片
            img.srcList=srcList;
            img.callBack=callBack;//回调函数
            img.addEventListener("load",this.loadHandler);//加载load
            img.src="./img/"+srcList[img.num];//拼接图片地址
        },
        loadHandler:function (e) {
        	//this 指代img
        	/*cloneNode该方法将复制并返回调用它的节点的副本。
        	 * 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
        	否则（也就是默认值，或者false），它只复制当前节点。*/
            this.imgList.push(this.cloneNode(false));//将img图片尾插入imgList数组
            this.num++;
            if(this.num>=this.srcList.length){//图片数>=srcList数组(保存图片地址)的长度
                this.callBack(this.imgList);//将数组传入回调函数
                return;
            }
            //事件侦听没有被删除,只需更改src,监听加载load后触发该事件,进入该函数this.loadHandler
            this.src="./img/"+this.srcList[this.num];
        }
    }
})();

main代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utils.js"></script>
</head>

<body>
    <script>
        //无缝轮播图,全JS
        /*
        *   1\轮播图大容器-->图片容器,左右按钮,小圆点
        *   2\点击按钮,标志当前挪动图片索引,移动的方向
        *   3\点击小圆点,标志当前挪动图片的索引,移动的方向
        *   4\创建目标图片放置在当前图片的前或后
        *   5\移动图片容器到目标图片位置后,删除前或后原来的图片
        * */
        var bnList,imgList,imgCon,ul,pre;//存储  左右按钮  图片名  图片容器  下方圆点标签容器
        var position=0,//图片的序号
            direction="left",//方向
            playBo