普通轮播图

效果图如下：

普通轮播图

html结构代码：

<div class="carousel">
    <ul>
        <li class="active">
            <a href="./img/1.jpg">
                <img src="./img/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="./img/2.jpg">
                <img src="./img/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="./img/3.jpg">
                <img src="./img/3.jpg" alt="">
            </a>
        </li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <a href="" class="leftBtn">&lt;</a>
    <a href="" class="rightBtn">&gt;</a>
</div>

样式代码：

.carousel {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
}
.carousel:hover {
    cursor: pointer;
}
.carousel ul, .carousel ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.carousel ul li a img {
    width: 600px;
    height: 300px;
}
.carousel ul li {
    display: none;
}
.carousel ul li.active {
    display: block;
}
.carousel ol {
    width: 60px;
    height: 20px;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.carousel ol li {
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
    float: left;
    margin: 5px;
}
.carousel ol li.active {
    background-color: #f00;
}
.carousel>a {
    text-decoration: none;
    width: 20px;
    height: 40px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.carousel>a.leftBtn {
    left: 0;
}
.carousel>a.rightBtn {
    right: 0;
}

js逻辑代码：

// 获取所有标签
var carousel = document.querySelector('.carousel');
var ulis = carousel.querySelectorAll('ul li');
var olis = carousel.querySelectorAll('ol li');
var leftBtn = carousel.querySelector('a.leftBtn');
var rightBtn = carousel.querySelector('a.rightBtn');
// 定义当前显示的li的下标
var index = 0;
// 定义定时器变量
var timerId;
// 右方向按钮的点击事件
rightBtn.onclick = function() {
    // 让下标++
    index++;
    // 限制下标最大值
    if(index === ulis.length) {
        index = 0; // 超过最大值就设置为0 - 循环轮播
    }
    // 将所有li的active类名去掉
    for(var i = 0; i < ulis.length; i++) {
        ulis[i].className = '';
        olis[i].className = '';
    }
    // 根据新的下标，显示对应的li
    ulis[index].className = 'active';
    olis[index].className = 'active';
    // 阻止a标签的默认行为
    return false;
}
// 左方向按钮的点击事件
leftBtn.onclick = function() {
    // 让下标--
    index--;
    // 限制下标最小值
    if(index < 0) {
        index = ulis.length - 1; // 超过最小值就设置为最大值 - 循环轮播
    }
    // 将所有li的active类名去掉
    for(var i = 0; i < ulis.length; i++) {
        ulis[i].className = '';
        olis[i].className = '';
    }
    // 根据新的下标，显示对应的li
    ulis[index].className = 'active';
    olis[index].className = 'active';
    // 阻止a标签的默认行为
    return false;
}
// 小圆点的点击事件
for(var i = 0; i < olis.length; i++) {
    // 给每一个li设置属性，值为自己的下标
    olis[i].index = i;
    // 给每个li绑定单击事件
    olis[i].onclick = function() {
        // 将自己的下标赋值给index变量
        index = this.index;
        // 将所有li的active类名去掉
        for(var j = 0; j < ulis.length; j++) {
            ulis[j].className = '';
            olis[j].className = '';
        }
        // 根据新的index变量让对应的li显示
        ulis[index].className = 'active';
        olis[index].className = 'active';
    }
}
// 自动轮播
timerId = setInterval(function() {
    // 让下标++
    index++;
    // 限制下标最大值
    if(index === ulis.length) {
        index = 0; // 超过最大值就设置为0 - 循环轮播
    }
    // 将所有li的active类名去掉
    for(var i = 0; i < ulis.length; i++) {
        ulis[i].className = '';
        olis[i].className = '';
    }
    // 根据新的下标，显示对应的li
    ulis[index].className = 'active';
    olis[index].className = 'active';
}, 1000);
// 鼠标移入大盒子停止自动轮播
carousel.onmouseover = function() {
    clearInterval(timerId);
}
// 鼠标移出大盒子再次开始自动轮播
carousel.onmouseout = function() {
    timerId = setInterval(function() {
        // 让下标++
        index++;
        // 限制下标最大值
        if(index === ulis.length) {
            index = 0; // 超过最大值就设置为0 - 循环轮播
        }
        // 将所有li的active类名去掉
        for(var i = 0; i < ulis.length; i++) {
            ulis[i].className = '';
            olis[i].className = '';
        }
        // 根据新的下标，显示对应的li
        ulis[index].className = 'active';
        olis[index].className = 'active';
    }, 1000);
}

其中有些重复代码，可以封装为函数重复调用：

// 获取所有标签
var carousel = document.querySelector('.carousel');
var ulis = carousel.querySelectorAll('ul li');
var olis = carousel.querySelectorAll('ol li');
var leftBtn = carousel.querySelector('a.leftBtn');
var rightBtn = carousel.querySelector('a.rightBtn');
// 定义当前显示的li的下标
var index = 0;
// 定义定时器变量
var timerId;
// 右方向按钮的点击事件
rightBtn.onclick = function() {
    rightMove()
    // 阻止a标签的默认行为
    return false;
}
// 左方向按钮的点击事件
leftBtn.onclick = function() {
    // 让下标--
    index--;
    move()
    // 阻止a标签的默认行为
    return false;
}
// 小圆点的点击事件
for(var i = 0; i < olis.length; i++) {
    // 给每一个li设置属性，值为自己的下标
    olis[i].index = i;
    // 给每个li绑定单击事件
    olis[i].onclick = function() {
        // 将自己的下标赋值给index变量
        index = this.index;
        move()
    }
}
// 自动轮播
autoMove()
// 鼠标移入大盒子停止自动轮播
carousel.onmouseover = function() {
    clearInterval(timerId);
}
// 鼠标移出大盒子再次开始自动轮播
carousel.onmouseout = function() {
    autoMove()
}
// 有按钮点击轮播的代码重复了3次，封装为函数
function rightMove() {
    // 让下标++
    index++;
    move()
}
// 轮播图的核心代码重复了很多次
function move() {
    // 限制下标最大值
    if(index === ulis.length) {
        index = 0; // 超过最大值就设置为0 - 循环轮播
    }
    // 限制下标最小值
    if(index < 0) {
        index = ulis.length - 1; // 超过最小值就设置为最大值 - 循环轮播
    }
    // 将所有li的active类名去掉
    for(var i = 0; i < ulis.length; i++) {
        ulis[i].className = '';
        olis[i].className = '';
    }
    // 根据新的下标，显示对应的li
    ulis[index].className = 'active';
    olis[index].className = 'active';
}
// 自动轮播重复了2次
function autoMove() {
    timerId = setInterval(function() {
        rightMove()
    }, 1000);
}