JS轮播图_arrowr.click()-CSDN博客

本文链接：https://blog.csdn.net/weixin_44211097/article/details/120403316

<!--
 * @Author: your name
 * @Date: 2021-09-19 16:17:36
 * @LastEditTime: 2021-09-21 16:53:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Briup\JS\Swiper\lunbo-02\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js" defer></script>
</head>

<body>
    <div class="focus">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">&lt;</a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">&gt;</a>
        <!-- 滚动区域 -->
        <ul id="pic">
            <li>
                <a href="javascript:;"><img src="./image/a1.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./image/a2.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./image/a3.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./image/a4.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./image/a5.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle">
        </ol>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</body>

</html>

li {
    list-style: none;
}

a {
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #9eb2b4;
}

.focus {
    overflow: hidden;
    position: relative;
    width: 520px;
    height: 280px;
    margin: 100px auto;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    background-color: aqua;
}

.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}


/* 轮播图样式 */

.focus ul li {
    float: left;
}


/* 设置左右箭头 */

.arrow-l {
    display: none;
    position: absolute;
    top: 50%;
    left: -12px;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    border-radius: 0 50% 50% 0;
    z-index: 999;
}

.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    right: -12px;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    border-radius: 50% 0 0 50%;
    z-index: 999;
}


/* 设置小圆圈 */

.circle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.circle li {
    float: left;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .5);
    margin: 0 4px;
    border-radius: 50%;
    cursor: pointer;
}


/* //获得焦点的小圆圈样式 */

.current {
    background-color: #fff;
    box-shadow: 0 0 10px #fff;
}


/* 待完成，过渡效果 */

.show {
    display: block;
    animation-name: show;
    /* animation-duration: 2000;
    animation-timing-function: linear; */
}

/*
 * @Author: your name
 * @Date: 2021-09-19 16:18:01
 * @LastEditTime: 2021-09-21 16:49:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Briup\JS\Swiper\lunbo-02\js\index.js
 */

//arrow_l 左边箭头    arrow_r 右边箭头   focus  主面板
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
// console.log(focus);
//定时器
var timer = null;

//给focus添加监视器，鼠标经过，就显示左右按钮，停止计时器
focus.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer); //停止定时器
    timer = null;
});

//鼠标离开的事件
focus.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    // console.log('b');
    // 手动调用定时器
    timer = setInterval(function() {
        // 手动调用点击事件
        arrow_r.click();
    }, 2000);
})

//ul是轮播图  ol是轮播图下方小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');

//根据轮播图数量动态创建小圆圈的数量 且绑定事件
for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('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 = '';
        }
        //点击的小圆圈设置类名为current
        this.className = 'current';
        var index = this.getAttribute('index');
        num = index;
        picChange(num); //小圆圈点击的时候也调用图片切换函数
    });
}

//设置初始态
ol.children[0].className = 'current';
var num = 0;

// 右边箭头添加事件
arrow_r.addEventListener('click', function() {
    num++;
    if (num > ul.children.length - 1) {
        num = 0;
    }
    picChange(num);
    circleChange(num);
    // console.log('右击');
});
//左边箭头添加事件
arrow_l.addEventListener('click', function() {
    num--;
    if (num < 0) {
        num = ul.children.length - 1;
    }
    picChange(num);
    circleChange(num);
    // console.log('左击');
})

// 小圆圈改变
function circleChange(circle) {
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    ol.children[circle].className = 'current';
}

// 图片切换
function picChange(num) {
    for (var i = 0; i < ul.children.length; i++) {
        ul.children[i].style.display = 'none';
    }
    ul.children[num].style.display = 'block';
}