其他分享
首页 > 其他分享> > 原生js焦点轮播图的实现

原生js焦点轮播图的实现

作者:互联网

  继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题,

  简单解析一下思路:

    1,首先写好css样式问题

    2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index

    2,根据轮播图的张数,动态设置焦点小圆点的个数,并设置好相应的自定义属性(以备焦点图点击的时候与index对应方便去改变图片的播放问题)

    3,为了解决第一张和最后一张衔接的问题,给最后一张图后面追加第一张图,在播放追加的这张图的时候,改变位置播放2这张图;左侧播放仪式一样,复制最后一张图放在最前面做衔接;完成后注意及时改变盒子的宽度和定位置

    4,自动播放:开启定时器,记录图片角标的index自加执行图片播放

    5,图片从起始位置到结束位置的播放实现

      5.1,获取元素原来的位置

      5.2,设置定时器移动

            1.把需要移动的位置分五次轮播--多少次都行   计算需要移动的长度----步长不一定是固定的

            2.计算出来的长度取整--可能不是整数

            3.原来的位置加上要移动的位置

            4.判断原来的位置移动后是否和需要去的位置相等

            5. 如果相等则清除定时器

         6.调用回调函数,判断index的极值问题及时做出改变

     6,改变圆点当前位置样式问题:主要通过index角标找到当前位置,然后与圆点自定义属性值对应来找到圆点当前位置

     7,焦点圆点控制的问题

        7.1,首先添加事件监听,判断点击对象

        7.2,清除定时器--防止点击过快

        7.3,执行图片播放

        7.4,继续自动播放

      8,上下翻页问题:

        8.1,首先添加事件监听,判断点击对象

        8.2,上翻页则index自减,上翻页则自增,相应的执行圆点改变及图片播放,最后自动播放

      9,鼠标移入移出问题:绑定事件监听,移入则清除定时器,移出则自动播放

        10,附代码如下:

        

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

        * {

            margin: 0;

            padding: 0;

        }

 

        ul,

        ol,

        li {

            list-style: none;

        }

 

        a,

        a:hover,

        a:active {

            text-decoration: none;

            color: #333;

        }

 

        .clear::after {

            content: "";

            display: block;

            clear: both;

        }

 

        .banner {

            width: 600px;

            height: 400px;

            margin: 40px auto;

            position: relative;

            /* overflow: hidden; */

        }

 

        .banner ul {

            width: 500%;

            height: 100%;

            position: absolute;

            top: 0;

            left: 0;

        }

 

        .banner ul li {

            width: 600px;

            height: 100%;

            float: left;

            display: flex;

            justify-content: center;

            align-items: center;

            color: #fff;

            font-size: 100px;

        }

 

        .banner ol {

            height: 50px;

            background: rgba(0, 0, 0, .4);

            position: absolute;

            bottom: 50px;

            left: 50%;

            transform: translateX(-50%);

            display: flex;

            justify-content: space-evenly;

            align-items: center;

            border-radius: 100px;

        }

 

        .banner ol li {

            width: 25px;

            height: 25px;

            border-radius: 50%;

            background: #fff;

            margin: 0 25px;

            cursor: pointer;

        }

 

        .banner ol li.active {

            background: red;

        }

 

        .banner div {

            width: 100%;

            height: 50px;

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

 

        .banner div a {

            width: 40px;

            line-height: 40px;

            font-size: 40px;

            font-weight: 900;

            color: #fff;

            background: rgba(0, 0, 0, .4);

            text-align: center;

        }

    </style>

</head>

<body>

<div class="banner">

        <!-- 需要轮序播放的图片,没有多的5和1 

             多出来的5和1是动态生成的

        -->

        <ul class="clear">

            <li style="background:pink ;">img1</li>

            <li style="background:gray ;">img2</li>

            <li style="background:blue ;">img3</li>

            <li style="background:skyblue;">img4</li>

            <li style="background:orange ;">img5</li>

            <li style="background:orange ;">img6</li>

        </ul>

        <!-- 与轮播图,对应的焦点按钮 

             是根据轮播图的图片数量,动态生成的

        -->

        <ol></ol>

        <div>

            <a href="JavaScript:;" class="left"> < </a>

            <a href="JavaScript:;" class="right"> > </a>

        </div>

    </div>

<script>

 

window.onload = function(){

// 标签对象

        var oDiv = document.querySelector('div');

        var oUl = oDiv.querySelector('ul');

        var oOl = oDiv.querySelector('ol');

        var oUllis = document.querySelectorAll('ul li');

        var wid = parseInt(window.getComputedStyle(oDiv)['width']);

        var oBtnBox = oDiv.querySelector('div');

        // 轮播图的角标

        var index = 1;

        // 自动轮播定时器

        var timer = 0;

        // 动态设置圆点的个数

        setDot();

        // 给第一张图前面复制最后欧一个节点,给最后一个元素复制第一个节点

        copyLi();

        // 自动播放

        autoPlay();

        // 点击圆点

        dotFocus();

        // 上翻页和下翻页

        page();

        // 鼠标移入移除

        mouse();

 

        // 设置圆点的个数

        function setDot(){

        var str = '';

        oUllis.forEach(function(val,i){

        if (i == 0) {

        // 给第一个点添加当前样式

        str += `<li class="active" index="1"></li>`

        } else {

        str += `<li index=${i + 1}></li>`

        }

        })

        oOl.innerHTML = str;

        }

 

        // 给第一张图前面复制最后一个节点,给最后一个元素复制第一个节点

        function copyLi(){

        var firstLi = oUllis[0];

        var lastLi = oUllis[oUllis.length - 1];

        var first = firstLi.cloneNode(true);

        var last = lastLi.cloneNode(true);

        oUl.appendChild(first);

        oUl.insertBefore(last,firstLi);

        // 重新赋值oUl的定位距离

        oUl.style.left = (-index * wid) + 'px';

        // 重新赋值oUl的宽度

        oUl.style.width = (oUllis.length + 2) * wid + 'px';

        }

 

        // 自动播放

        function autoPlay(){

        timer = setInterval(function(){

        index++;

        move(oUl,{left:-index * wid},moveEnd);

        dotChange();

        },2000)

        }

 

        // 1.获取元素原来的位置

        // 2.设置定时器移动

        //   1.把需要移动的位置分五次轮播--多少次都行   计算需要移动的长度

        //    2.计算出来的长度取整--可能不是整数

        //    3.原来的位置加上要移动的位置

        //    4.判断原来的位置移动后是否和需要去的位置相等

        //      如果相等则清除定时器

        function move(ele,obj,callback){

        for(var key in obj){

        var oldPos = parseInt(window.getComputedStyle(ele)[key]);

        var t = setInterval(function(){

        var step = (obj[key] - oldPos) / 5;

        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        oldPos += step;

        ele.style[key] = oldPos + 'px';

        if (oldPos == obj[key]) {

        clearInterval(t);

        callback()

        };

        },50)

        }

        }

      // 回调函数主要是判断index的极点值,然后赋值oUl的定位位置

        function moveEnd(){

        if (index == oUllis.length + 1) {

        index = 1;

        oUl.style.left = (-index * wid) + 'px';

        } else if (index == 0){

        index = oUllis.length;

        oUl.style.left = (-index * wid) + 'px';

        }

 

        }

 

        // 点的当前样式

        function dotChange(){

        var oOllis = oOl.querySelectorAll("li");

        oOllis.forEach(function(val,i){

        val.className = '';

        var m = index;

        if (index == oOllis.length + 1) {

        m = 1;

        };

        if (val.getAttribute('index') * 1 == m) {

        val.className = 'active'

        };

        })

        }

 

        // 点击圆点

        function dotFocus(){

        oOl.addEventListener('click',function (e) {

        e = e || window.event;

        if (e.target.tagName == 'LI') {

        clearInterval(timer)

        index = e.target.getAttribute('index') * 1;

        dotChange();

        move(oUl,{left:-index * wid},moveEnd);

        autoPlay()

        };

        })

        }

 

        // 上下翻页

        function page(){

        oBtnBox.addEventListener('click',function(e){

        e = e || window.event;

        if (e.target.className == 'left') {

        clearInterval(timer);

        index--;

        dotChange();

        move(oUl,{left:-index * wid},moveEnd);

        autoPlay()

        };

        if (e.target.className == 'right') {

        clearInterval(timer);

        index++;

        dotChange();

        move(oUl,{left:-index * wid},moveEnd);

        autoPlay()

        };

        })

        }

 

        // 鼠标移入移出

        function mouse(){

        oDiv.addEventListener('mouseover',function(){

        clearInterval(timer);

        })

        oDiv.addEventListener('mouseout',function(){

        autoPlay()

        })

        }

}

 </script>

</body>

</html>

标签:原生,index,轮播,oUl,function,位置,js,var,left
来源: https://www.cnblogs.com/chysunny/p/cherry.html