原生JavaScript轮播图

妄想伤感代价联盟

已于 2023-10-24 06:51:20 修改

阅读量164

点赞数

文章标签： javascript 前端 html

于 2022-05-09 01:10:45 首次发布

本文链接：https://blog.csdn.net/weixin_62845067/article/details/124658052

版权

效果图:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAemhpaHVpNDMx,size_20,color_FFFFFF,t_70,g_se,x_16

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

 

  <title>HTML</title>

  

  <link rel="stylesheet" href="style.css">

  <script src="main.js"></script>

  

</head>

 

<body>

    <div class="focus">

        <a href="javascript:;" class="arrow_l"><</a>

        <a href="javascript:;" class="arrow_r">></a>

        <!-- 核心滚动区域 -->

        <ul>

            <li>

                <a href="javascript:;"><img src="/images/jpg1.jpg" alt=""></a>

            </li>

            <li>

                <a href="javascript:;"><img src="/images/jpg2.jpg" alt=""></a>

            </li>

            <li>

                <a href="javascript:;"><img src="/images/jpg3.jpg" alt=""></a>

            </li>

            <li>

                <a href="javascript:;"><img src="/images/jpg4.jpg" alt=""></a>

            </li>

        </ul>

        <!-- 小圆圈 -->

        <ol class="circle">

            

        </ol>

    </div>

</body>

 

</html>


* {

margin: 0;

padding: 0;

}

.focus {

    width: 200px;

    height: 120px;

    overflow: hidden;

    margin: 50px auto 0;

    position: relative;

}

.focus ul {

    display: flex;

    flex-wrap: wrap;

    width: 1000px;

    height: 120px;

    position: absolute;

}

.focus ul li {

    list-style: none;

    width: 200px;

    height: 100%;

}

.focus ul li img {

    width: 100%;

    height: 100%;

}

.focus .arrow_l,

.arrow_r {

    top: 50%;

    margin-top: -15px;

    width: 20px;

    height: 20px;

    display: block;

    text-decoration: none;

    display: none;

    position: absolute;

    z-index: 2;

    color: #fff;

    text-align: center;

    line-height: 20px;

    background: rgba(255, 255, 255, .3);

}

.focus .arrow_r {

    right: 0px;

}

.focus .circle {

    display: flex;

    flex-wrap: wrap;

    bottom: 3px;

    left: 40px;

    position: absolute;

    z-index: 3;

}

.focus .circle li {

    width: 15px;

    height: 15px;

    margin:0 3px;

    list-style: none;

    border-radius: 50%;

    border: 1px solid #999;

}

.current {

    background: #fff;

}

window.addEventListener('load', function() {

    //动画函数

    

    function animate(obj, target) {

        clearInterval(obj.timer);

        obj.timer = setInterval(function() {

            var step = (target - obj.offsetLeft) / 10;

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

            if (obj.offsetLeft == target) {

                clearInterval(obj.timer);

            } else {

            obj.style.left = obj.offsetLeft + step + 'px';

            }

        }, 30)

    }

    

    var focus = document.querySelector('.focus');

    

    var arrow_l = document.querySelector('.arrow_l');

    var arrow_r = document.querySelector('.arrow_r');

    

    focus.addEventListener('mouseenter', function() {

        arrow_l.style.display = 'block';

        arrow_r.style.display = 'block';

        //停止定时器

        clearInterval(timer);

        timer = null;//清除变量

        console.log('清除定时器');

    })

    focus.addEventListener('mouseleave', function() {

        arrow_l.style.display = 'none';

        arrow_r.style.display = 'none';

        //鼠标离开，开启定时器

        var timer = setInterval(function() {

            arrow_r.click()

        }, 2000);

        console.log('开启定时器');

    })

    

    

    //动态生成小圆圈

    

    var ul = document.querySelector('ul');

    var ol = document.querySelector('ol');

    //console.log(ul.children)

    for (var i = 0 ; i < ul.children.length; i++) {

        //创建小li

        var li = document.createElement('li');

        //记录小li索引号，用自定义属性

        

        li.setAttribute('index', i);

        

        ol.appendChild(li);

        

        li.addEventListener('click', function() {

            //排他

            for (var i = 0; i < ol.children.length; i++) {

                ol.children[i].className = '';

            }

            this.className = 'current';

            var index = this.getAttribute('index');

            num = index;

            circle = index;

            //var focusetWidth = ul.children.offsetWidth;

            //console.log(focusetWidth)

            animate(ul,-index * 200);

        })

    }

    //将ol中第一个小li的类名设置为current

    ol.children[0].className = 'current';

    

    //克隆第一张图片到ul的最后面(一定是深克隆)

    var first = ul.children[0].cloneNode(true);

    ul.appendChild(first);

    var circle = 0;

    var num = 0;

    arrow_r.addEventListener('click', function() {

        if (num == ul.children.length - 1) {

            ul.style.left = 0;

            num = 0;

        }

        num++;

        circle++;

        animate(ul, -num * 200);

        if (circle == ol.children.length) {

            circle = 0;

        }

        for (var i = 0;i < ol.children.length; i++) {

            ol.children[i].className = '';

        }

        ol.children[circle].className = 'current';

    })

    

    //左箭头切换

    arrow_l.addEventListener('click', function() {

        if (num == 0) {

            ul.style.left = -(ul.children.length - 1) * 200 + 'px';

            num = ul.children.length - 1;

        }

        num--;

        circle--;

        animate(ul, -num * 200);

        if (circle < 0) {

            circle = 3;

        }

        for (var i = 0; i < ol.children.length; i++) {

            ol.children[i].className = '';

        }

        ol.children[circle].className = 'current';

    })

    

    //自动播放图片

    var timer = setInterval(function () {

        arrow_r.click();

    }, 2000);

})

妄想伤感代价联盟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生JavaScript轮播图

效果图:html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1">...
复制链接

扫一扫