javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js轮播图

js实现点击切换和自动播放的轮播图

作者:_Wz_

这篇文章主要为大家详细介绍了js实现点击切换和自动播放的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下

轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    // 1、布局
    // 2、定义当前第几张图片和应该向什么方向运动
    // 3、将需要放置的图片根据方向放在前面或者后面
    // 4、将整个容器向左或者向右移动
    // 5、完成后将上一次的图片删除

    // imgCon   放置所有图片的容器
    // dotList  放置小圆点列表
    // bnList   放置左右按钮的数组
    // imgList  放置所有图片的数组
    // pos      确认当前图片是第几张
    // direction图片运行的方向
    // imgSrcList 图片地址数组
    var imgCon,ul,preDot;
    var pos=0,
        x=0,
        bool=false;
        dotList=[],
        imgList=[],
        bnList=[],
        time=300,
        imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"]
        direction=""
        autoBool=false;
    const WIDTH=1500;
    const HEIGHT=500;
    const LEFT=Symbol();
    const RIGHT=Symbol();
    const SPEED=40;
    init();
    /*
        init() 初始化函数
        1、创建轮播图外层容器
        2、创建轮播图图片容器
        3、创建按钮列表
        4、创建小圆点列表
        5、将轮播图容器放在body中
        6、切换小圆点,因为当前是第0张,所以让第一个小圆点背景为红色
        7、将小圆点容器设置水平居中
        8、设置时间间隔,每16毫秒执行animation函数一次,因为一秒是1000毫秒
            一秒中执行60次,就是60帧频,每次花费的时间是16.6666毫秒
        9、给最外层的轮播图增加事件侦听,一个是鼠标进入,一个是鼠标离开
    */
    function init(){
        var carousel=ce("div",{
            width:WIDTH+"px",
            height:HEIGHT+"px",
            position:"relative",
            margin:"auto",
            overflow:"hidden"
        });
        createImgCon(carousel);
        createButton(carousel);
        createDotList(carousel);
        document.body.appendChild(carousel);
        changeDot();
        ul.style.left=(WIDTH-ul.offsetWidth)/2+"px"; 
        setInterval(animation,16);
        carousel.addEventListener("mouseenter",mouseHandler);
        carousel.addEventListener("mouseleave",mouseHandler);
    }

    /*
        轮播图进入和离开的事件函数
        1、如果进入轮播图,设置自动轮播的开关是false,不会自动轮播
            并且重新将计时设置为300
        2、如果离开轮播图,设置自动轮播开关是true,就会自动轮播了
    */
    function mouseHandler(e){
        if(e.type==="mouseenter"){
            autoBool=false;
            time=300;
        }else if(e.type==="mouseleave"){
            autoBool=true;
        }
    }

    /*
        创建元素
        参数:
            type    创建元素的类型,字符串
            style   创建元素的样式,对象,使用对象方式给出该容器的样式
        1、根据类型创建元素
        2、将给入的样式设置给元素的行内样式
        3、返回创建好的元素
    */
    function ce(type,style){
        var elem=document.createElement(type);
        // ES6的方法,将后面的对象中的属性复制到前面对象中
        Object.assign(elem.style,style);// 等同于下面写法
        /* for(var prop in style){
            elem.style[prop]=style[prop];
        } */
        return elem;
    }

    /* 
        创建轮播图容器和图片
        参数:
            parent 父容器,将创建好的容器和图片放在父容器内
        1、创建图片容器,容器宽度是两张图片的宽度
        2、根据所有轮播图地址数组,创建所有图片并且放在数组imgList中
        3、将第0张图片放在创建图片容器imgCon中
        4、将图片容器放在整个轮播图容器中
    */
    function createImgCon(parent){
        imgCon=ce("div",{
            position:"absolute",
            width:2*WIDTH+"px",
            height:HEIGHT+"px",
            left:0
        });
        for(var i=0;i<imgSrcList.length;i++){
            var img=ce("img",{
                width:WIDTH+"px",
                height:HEIGHT+"PX"
            });
            img.src=imgSrcList[i];
            imgList.push(img);
        }
        imgCon.appendChild(imgList[0]);
        parent.appendChild(imgCon);
    }

    /*
        创建左右按钮函数
        参数:
            parent 父容器,将创建好的按钮放在父容器内
        1、创建按钮地址数组
        2、循环这个地址数组,创建所有图片,并且放置对应的位置
        3、设置图片地址
        4、将按钮图片放在轮播图容器中
        5、给左右按钮增加点击事件执行函数bnClickHander
    */
    function createButton(parent){
        // 局部变量
        var arr=["left","right"];
        for(var i=0;i<arr.length;i++){
            var img=ce("img",{
                position:"absolute",
                // (外容器高度-当前图片高度) / 2 垂直居中
                top:(HEIGHT-60)/2 +"px",
                // 如果是第0张图片,左边按钮,定位居左50像素,否则none
                left:i===0 ? "50px" : "none",
                // 如果是第1张图片,右边按钮,定位居右50像素,否则none
                right:i===1 ? "50px" : "none",
            });
            img.src=`./img/${arr[i]}.png`;
            bnList.push(img);
            parent.appendChild(img);
            img.addEventListener("click",bnClickHander);
        }
    }

    /*
        创建小圆点容器
        参数:
            parent 父容器,将创建好的小圆点放在父容器内
        1、创建ul设置样式
        2、根据图片地址的数组,循环若干次,有多少图片就循环多少次创建小圆点
        3、将每个小圆点存在数组dotList中
        4、将小圆点放在ul中
        5、给ul增加点击事件,实际是点击小圆点,事件委托

    */
    function createDotList(parent){
        ul=ce("ul",{
            listStyle:"none",
            margin:0,
            padding:0,
            position:"absolute",
            bottom:"50px"
        });
        for(var i=0;i<imgSrcList.length;i++){
            var dot=ce("li",{
                width:"28px",
                height:"28px",
                borderRadius:"50%",
                border:"2px solid #FF0000",
                float:"left",
                marginLeft:i===0 ? "0px" : "15px"
            });
            dotList.push(dot);
            ul.appendChild(dot);
        }
        // dotList=Array.from(ul.children);
        parent.appendChild(ul);
        ul.addEventListener("click",dotClickHandler);
    }

    /*
        点击左右按钮事件函数
        e   点击事件    MouseEvent
        e.target 是被点击的按钮图片
        如果bool是true,也就是当前轮播图正在播放时,点击按钮跳出,不继续执行
        1、判断被点击图片的地址里面是包含有left.png字符串
        如果有,就是点击左侧按钮,反之就是右侧按钮
        2、如果点击了左侧按钮,当前图片下标-1
        如果小于0,让它为当前图片地址数量-1,最大应有的图片下标,并且设置方向是向右运动
        3、如果点击了右侧按钮,当前图片下标+1,如果大于当前图片地址数量-1,就让它为0
        回到最开始第0张图片,并且设置方向是向右运动
    */
    function bnClickHander(e){
        if(bool) return;
        // 查找图片的src地址中是否包含
        if(e.target.src.includes("left.png")){
            pos--;
            // imgSrcList.length-1图片数组的长度减一,也就是pos根据图片数组的长度来定值
            if(pos<0) pos=imgSrcList.length-1;
            direction=RIGHT;
        }else{
            pos++;
            if(pos>imgSrcList.length-1) pos=0;
            direction=LEFT;
        }
        createNextImg();
    }

    /*
        小圆点点击事件函数
        e 鼠标事件对象 MouseEvent
        e.target 是鼠标点击的目标
        因为使用是事件委托,因此判断点击目标是不是li,如果不是就跳出
        如果bool是true,也就是当前轮播图正在播放时,点击按钮跳出,不继续执行
        1、判断点击目标是否是li,不是跳出
        2、获取当前点击的小圆点时数组中第几个
        3、如果当前的点击小圆点的下标和当前展示图片的下标相同时,跳出不处理
        4、如果大于当前展示图片的下标,方向设置为向左运动,反之向右
        5、将当前点击的下标设为当前应展现图片的下标
    */
    function dotClickHandler(e){
        if(bool) return;
        // if(e.target.nodeName!="LI") return;
        if(e.target.constructor!==HTMLLIElement) return;
        var index=dotList.indexOf(e.target);
        if(index===pos) return;
        direction=index>pos ? LEFT : RIGHT;
        pos=index;
        createNextImg();
    }

    /*
        创建下一张需要显示的图片
        当点击左右按钮和当点击小圆点时,触发该函数
        1、如果方向想左运动,给图片容器尾部添加新的图片
        2、如果方向向有运动,给图片容器的最头部添加新图片
        但是这个时候原图被挤到最后,然后将整个容器向左移动一个图片宽度
        3、设置完成后,设置bool是true,这时候就打开了动画的播放开关
        动画就可以完成播放了
        4、切换当前小圆点
    */
    function createNextImg(){
        // console.log(direction,pos,imgList[pos]);
        if(direction===LEFT){
            imgCon.appendChild(imgList[pos]);
            x=0;
        }else if(direction===RIGHT){
            // insertBefore要插入的元素,插入在谁的前面
            imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
            imgCon.style.left=-WIDTH+"px";
            x=-WIDTH;
        }
        bool=true;
        changeDot();
    }

    /*
        切换小圆点
        preDot是对上一次小圆点的引用变量
        刚开始第一次时,没有引用,因此不执行,并且设置第一次设置了第0个萧远山
        更改了第0个小圆点的背景色
        第二次进来上次小圆点的引用时第0个,所以就将上次的小圆点修改背景透明
        将本次小圆点设置给这个引用,并且修改背景色
        再次进入就可以修改原来的,设置新的
    */
    function changeDot(){
        if(preDot){
            preDot.style.backgroundColor="rgba(255,0,0,0)";
        }
        preDot=dotList[pos];
        preDot.style.backgroundColor="rgba(255,0,0,0.5)";
    }

    /*
        每16毫秒执行该函数一次
        1、执行imgConMove这个函数,让图片移动的方法
        2、执行自动轮播
    */
    function animation(){
        imgConMove();
        autoplay();
    }

    /*
        每16毫秒让图片移动一次
        开始的时候就一直运行,因为有一个bool值判断,如果false时,一直不能进入
        如果可以进入
        1、如果方向为左
            不断让变量x递减,每16毫秒减40像素,设置图片容器位置,图片容器就可以移动了
            当图片容器的第一张图完全移动到最左侧以后,也就是x小于等于负的图片宽度
            设置bool值false,16毫秒后进入时直接跳出
            删除掉移到最左侧的图片,后面的图片会补充到最前面,设置将x为0,让整个容器向后挪回初始位置
        2、如果方向向右
            x不断增加40像素
            如果x大于0,表示左侧的图片已经移到中间位置,原图片移到了右侧
            这个时候停止运动,bool设为false,x设为初始的0,删除右侧的图片
    */
    function imgConMove(){
        if(!bool) return;
        if(direction===LEFT){
            x-=SPEED;
            if(x<=-WIDTH){
                imgCon.firstElementChild.remove();
                x=0;
                bool=false;
            }
            imgCon.style.left=x+"px";
        }else if(direction===RIGHT){
            x+=SPEED;
            if(x>=0){
                bool=false;
                x=0;
                imgCon.lastElementChild.remove();
            }
            imgCon.style.left=x+"px";
        }
    }
    
    /*
        自动轮播
        1、如果自动轮播开关是fasle时,跳出
        2、time不断减少
        3、如果time大于0就不继续执行跳出
        4、time等于0,设置time初始为300
        5、创建一个点击事件对象
        6、向右侧按钮抛发这个点击事件
    */
    function autoplay(){
        if(!autoBool) return;
        time--;
        if(time>0) return;
        time=300;
        var evt=new MouseEvent("click");
        bnList[1].dispatchEvent(evt);
    }
</script>
</body>
</html>

效果展示

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

您可能感兴趣的文章:
阅读全文