当前位置：网站首页>JS轮播图实现

JS轮播图实现

2022-08-09 12:59:00 【_七七】
<!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.0">
    <title>Document</title>

    <style> * {
       margin: 0; padding: 0; box-sizing: border-box; } ul, ol {
       list-style: none; } a {
       text-decoration: none; color: white; } .box {
       position: relative; top: 100px; width: 600px; height: 400px; margin: 0 auto; background-color: pink; overflow: hidden; } .box img {
       height: 400px; width: 600px; } .box ul {
       display: flex; position: absolute; top: 0px; left: 0px; } .arrow-l, .arrow-r {
       display: none; position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; z-index: 2; } .arrow-r {
       right: 0; } .circle {
       display: flex; position: absolute; bottom: 10px; left: 50px; } .current {
       background-color: #fff; } .circle li {
       /* float: left; */ width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current {
       background-color: #fff; } </style>


    <script> window.addEventListener('load', function () {
       // 封装动画函数 function animate(obj, target, callback) {
       // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () {
       // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) {
       // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) {
       // // 调用函数 // callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } //轮播图 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var box = document.querySelector('.box'); box.addEventListener('mouseenter', function () {
       arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null; // 清除定时器变量 }) box.addEventListener('mouseleave', function () {
       arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function () {
       //手动调用点击事件 arrow_r.click(); }, 2000); }) // 动态生成小圆圈 有几张图片 就生成几张小圆圈 var ul = document.querySelector('.ul'); var ol = document.querySelector('.circle') for (var i = 0; i < ul.children.length; i++) {
       // 创建li 插入ol var li = document.createElement('li'); ol.appendChild(li); //自定义属性 记录索引号 li.setAttribute('data-index', i); //li设置类 li.addEventListener('click', function () {
       for (var i = 0; i < ol.children.length; i++) {
       ol.children[i].className = ''; } this.className = 'current'; // 点击小圆圈滚动图片 // 得到宽度 var width = box.offsetWidth; var index = this.getAttribute('data-index'); num = index; circle = index; // 步长 var step = index * width; // 调用函数 animate(ul, - step); }) } // 设置第一张图片为current ol.children[0].className = 'current'; // 克隆第一张图片li放在ul最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 节流阀 flag var flag = true; // 点击按钮 滑动图片 无缝滚动 var num = 0; // 控制小圆圈播放 var circle = 0; arrow_r.addEventListener('click', function () {
       if (flag) {
       // 关闭节流阀 flag = false; if (num == ul.children.length - 1) {
       ul.style.left = 0; num = 0; } num++; animate(ul, -num * (box.offsetWidth), function () {
       flag = true; }); // 点击一次 小圆圈播放也加1 circle++; if (circle == ul.children.length - 1) {
       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 (flag) {
       if (num == 0) {
       num = ol.children.length; } num--; animate(ul, -num * (box.offsetWidth), function () {
       flag = true; }); // 点击一次 小圆圈播放-1 circle--; if (circle < 0) {
       circle = ol.children.length - 1; } 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); }) </script>

</head>

<body>

    <div class="box">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
            《
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">
            》</a>

        <ul class="ul">
            <li>
                <a href="#"><img src="upload/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus3.jpg" alt=""></a>
            </li>
        </ul>

        <!-- 小圆圈 -->
        <ol class="circle">
            <!-- <li class="current"></li> <li></li> <li></li> -->
        </ol>

    </div>

</body>

</html>
原网站
版权声明
本文为[_七七]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43472877/article/details/126143320
当前位置：网站首页>JS轮播图实现

JS轮播图实现

边栏推荐

猜你喜欢

随机推荐
