【demo】原生js写最最最最最最简单的轮播图

效果

---

BUG

1. 没有首尾相接

---

代码

<div id="adv">
	<div id="arr">
		<button class="arrow" id="left">←button>
		<button class="arrow" id="right">→button>
	div>
	<div id="adv-img">
		<ul id="adv-img-ul" style="left:0;">
			<li><img src="img/11.jpg" width="100%">li>
			<li><img src="img/22.jpg" width="100%">li>
			<li><img src="img/33.jpg" width="100%">li>
			<li><img src="img/44.jpg" width="100%">li>
			<li><img src="img/55.jpg" width="100%">li>
		ul>		
	div>
	<div class="num">
		<ul id="adv-img-num">
			<li index="1" class="on">○li>
			<li index="2">○li>
			<li index="3">○li>
			<li index="4">○li>
			<li index="5">○li>
		ul>
	div>
div>

#adv {
	position: relative;
	display: flex; 
	align-items: center;    /*弹性盒子实现垂直居中*/
	margin: 0 auto;
	min-width: 1400px;
	max-width: 1500px;
	height: 400px;
}
.arrow {
	position: absolute;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	color: #000;
	text-align: center;
	line-height: 60px;
	font-size: 50px;
	background: #e5e5e5;
	filter: alpha(opacity=70);    /*ie*/
	opacity: .7;
	border: 0;
	z-index: 2;
	transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari 和 Chrome */
    -o-transition: all .5s; /* Opera */
}
.arrow:hover {
	filter: alpha(opacity=40);    /*ie*/
	opacity: .4;
}
#left{
	left: 0;
}
#right {
	right: 0;
}
#adv-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#adv-img-ul {
	position: absolute;
	left: -100%;
	top: 0;
	width: 1000%;
	transition: all 1s linear;
}
#adv-img-ul li {
	float: left;
	width: 10%;
}
.num {
	position: absolute;
	height: 50px;
	width: 100%;
	top: 400px;
	text-align: center;
	z-index: 99;
}
.num ul {
	display: inline-block;
}
#adv-img-num li {
	float: left;
	margin: 0 20px 0 20px;
	color: #e5e5e5;
	cursor: pointer;  
}
#adv-img-num .on{
	float: left;
	margin: 0 20px 0 20px;
	color: #85ace0;
}

var adv = byId("adv");
var imgUl = byId("adv-img-ul");
var right = byId("right");
var left = byId("left");
var button = byId("adv-img-num").children;
var index = 1;

//改变位置
function animate(offset){
    var newLeft = parseInt(imgUl.style.left) + offset;
    if(newLeft < -400){
        // 到了最右
        imgUl.style.left = 0 + '%';
    }else if(newLeft > 0){
        // 到了最左
        imgUl.style.left = -400 + '%';
    }else{
        imgUl.style.left = newLeft + '%';  
    }
}


//自动轮播 鼠标悬停暂停
var timer = null;
function startImg(){
    if(timer)clearInterval(timer);
    timer = setInterval(function(){
        right.onclick();
    },2000);
}
adv.onmouseover = function stopImg(){
    clearInterval(timer);
}
adv.onmouseout = function startImg(){
    if(timer)clearInterval(timer);
    timer = setInterval(function(){
        right.onclick();
    },2000);
}
// 我一定要写两个原装开始才会动？？什么毛病？？

//下面按钮
function buttonShow(){
    // 清除原有样式
    for(var i=0; i<button.length; i++){
        if (button[i].className == 'on') {
            button[i].className = '';
        }
    }
    button[index-1].className = 'on';

}
left.onclick = function(){
    index -= 1;
    if(index < 1){
        index = 5;
    }
    buttonShow();
    animate(100);
}
right.onclick = function(){
    index += 1;
    if(index > 5){
        index = 1;
    }
    buttonShow();
    animate(-100);
}
//点击按钮跳转
for (var i = 0; i < button.length; i++) {
    // 立即执行函数 不闭包就只执行i=5时候
    (function(i) {
        button[i].onclick = function() {
            var clickIndex = parseInt(this.getAttribute('index'));
            var offset = 100 * (index - clickIndex); 
            animate(offset);
            index = clickIndex;
            buttonShow();
        }
    })(i)
}