JS-案例-全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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值