原生js轮播图代码

代码实现的功能：
1、自动轮播
2、点击左右箭头轮播
3、鼠标放上去停止定时器
4、鼠标离开，开启定时器
话不多说，上代码
换一下图就能用

HTML部分

<div class="focus fl">
		<!-- 左侧按钮 -->
		<a href="javacsript:;" class="arrow_l"><</a>
		<!-- 右侧按钮 -->
		<a href="javascript:;" class="arrow_r">></a>
		<!-- 滚动区域 -->
		<ul>
			<li>
				<a href="javascript:;">
					<img src="imgs/1.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="imgs/2.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="imgs/3.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="imgs/4.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="imgs/5.jpg" alt="">
				</a>
			</li>
		</ul>

		<ol class="circle">
			
		</ol>
	</div>

css部分

* {
	margin: 0;
	padding: 0;
}
	a {
	text-decoration: none;
	color: #333;
}
	li {
	list-style: none;
}
	/*按照你的图片大小修改.focus的宽度*/
	.focus {
	width: 800px;
	height: 300px;
	margin: 100px auto;
	background-color: hotpink;
	position: relative;
	overflow: hidden;
}
	
	.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-size: 18px;
	z-index: 2;
}
	.arrow_r {
	right: 0;
}
	ul {
	width: 600%;
	/*js调动位移，移动的是ul，所以要在这里设置绝对定位*/
	position: absolute;
}
	ul li {
	float: left;
}
	.circle {
	height: 20px;
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	cursor: pointer;
}
	.circle li {
	width: 10px;
	line-height: 20px;
	height: 50%;
	border: 1px solid ivory;
	border-radius: 50%;
	float: left;
	margin: 0 10px;
}
	.current {
	background-color: ivory;
}

JavaScript部分

// 1.等到页面加载结束在运行js代码
window.addEventListener('load', function() {
    // 2.获取标签
    var focus = this.document.querySelector('.focus');
    var arrow_l = this.document.querySelector('.arrow_l');
    var arrow_r = this.document.querySelector('.arrow_r');
    var focusWidth = focus.offsetWidth;
    // 3.鼠标上去箭头显示
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 9.1鼠标放上去定时器停止
        clearInterval(timer);
        timer = null;
    })
    // 4.鼠标上去箭头显示
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 9.2鼠标放上去定时器开启
        timer = setInterval(function() {
            // 手动调用点击事件，不用再调用其他的，这行命令就能直接调用了
            arrow_r.click();
        }, 2000);
    })
    // 5.动态生成小圆点,点击切换
    var ul = focus.children[2];
    
    var circle = this.document.querySelector('.circle');
    // console.log(ul);
    for(var i = 0; i<ul.children.length; i++) {
        var li = this.document.createElement('li');
        li.setAttribute('index', i);
        circle.appendChild(li);
        
        li.addEventListener('click', function() {
            // 排他原理
            for(var i = 0; i<circle.children.length; i++) {
                // 干掉所有人
                circle.children[i].className = '';
            }
            // 保留我自己
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            circleNum = index;
            animate(ul, -index * focusWidth);
        })
    }
    // 第一个默认上色
    circle.children[0].className = 'current';
    // 克隆第一张图片放在最后
    var ulFirst = ul.children[0].cloneNode(true);
    ul.appendChild(ulFirst);
    // 6.点击右键头向右滚动
    var num = 0;
    var circleNum = 0;
    // 10.设置节流阀，一张过去之后，下一张才能点击
    var flag = true;
    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 * focusWidth, function() {
                flag = true;
            });
    
            circleNum++;
            /* if(circleNum == circle.children.length) {
                circleNum = 0;
            } */
            //与上面三行代码效果一样，只不过换成了三元表达式
            circleNum = circleNum == circle.children.length ? 0 : circleNum;
            circleChange();
        }
    })
    // 7.点击左箭头向左移动
    arrow_l.addEventListener('click', function() {
        if(flag) {
            flag = false;
            if(num == 0) {
                // 消除从最后一张移到第二张的动画，看起来像是无缝滚动
                num = ul.children.length -1;
                ul.style.left = - num * focusWidth + 'px';
                
            }
            num--;
            // 大体上都是在水平移动所以这里的target必须是负值
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
    
            circleNum--;
            // 如果小圆点位于第一个，那么它的位置就是0，circleNum就要回到最后一个
            /* if(circleNum < 0) {
                circleNum = circle.children.length -1;
            } */
            //与上面三行代码效果一样，只不过换成了三元表达式
            circleNum = circleNum < 0 ? circle.children.length -1 : circleNum;
            circleChange();
        }
    })

    function circleChange() {
        for(var i = 0; i < circle.children.length; i++) {
            // 干掉所有人
            circle.children[i].className = '';
        }
        // 保留我自己
        circle.children[circleNum].className = 'current';
    }
    // 8.自动轮播
    var timer = setInterval(function() {
        // 手动调用点击事件，不用再调用其他的，这行命令就能直接调用了
        arrow_r.click();
    }, 2000)
})

动画封装部分

function animate(obj, target, callback) {
    // console.log(callback);   输出的是一个函数，回调函数因该在定时器结束后执行
    
        var step = 0;
        // 先清除以前的定时器，只保留当前定时器
        clearInterval(obj.timer);
        // obj.timer给obj添加timer属性，防止多个对象调用混乱（var timer）
        obj.timer = setInterval(function(e) {
            // 为了防止步长出现小数，向前走向上取整，向后走向下取整
            step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if(obj.offsetLeft == target) {
                clearInterval(obj.timer);
                // 定时器结束后就立即执行回调函数
                if(callback) {
                    callback();
                }
            }
            obj.style.left = step + obj.offsetLeft + 'px';
        
    }, 15);
}

如果有更好的方法，或修改建议，欢迎评论或私聊