<!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;
}
.wrap{
width: 730px;
height: 457px;
background-color: red;
margin: 0 auto;
overflow: hidden;
position: relative;
}
ul{
list-style: none;
}
.Oimg{
width: 4380px;
height: 100%;
position: absolute;
}
.Oimg>li{
width: 730px;
height: 100%;
float: left;
}
.btnL{
width: 100px;
height: 50px;
position: absolute;
font-size: 25px;
top:200px;
left:0;
color: red;
z-index: 1;
}
.btnR{
width: 100px;
height: 50px;
color: red;
font-size: 25px;
position: absolute;
top:200px;
right:-70px;
z-index: 1;
}
.borRadius{
width: 250px;
height: 30px;
/* background: yellow; */
position: absolute;
top:400px;
left:200px;
}
.borRadius>li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
float: left;
margin: 5px 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="btnL"><</div>
<div class="btnR">></div>
<ul class="Oimg">
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/4.jpg" alt="">
</li>
<li>
<img src="img/5.jpg" alt="">
</li>
<li>
<img src="img/6.jpg" alt="">
</li>
</ul>
<ul class="borRadius">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var oul=document.querySelector('.Oimg');
var oli=document.querySelectorAll('.Oimg li');
var olist=document.querySelectorAll('.borRadius li');
var oLbtn=document.querySelector('.btnL');
var oRbtn=document.querySelector('.btnR');
// console.log(oli.length)
// offsetWidth 得到的是li的宽 每一个li的宽是 730px
// 每一次让不同的li去乘以当前的下标,把这个值赋值ul的left属性
//1.自动轮播
var i=0;
setInterval(move,3000)
function move(){
if(i>5){
i=0;
}
oul.style.left= -(oli[i].offsetWidth*i)+'px';
Border(i)
i++;//2 3 4 5 6
}
//2.点击圆圈
for(var k=0; k<olist.length; k++){
olist[k].index=k;
olist[k].onclick=function(){
oul.style.left=-(this.index*730)+'px';
Border(this.index);
i=this.index;//把当前点击原点的下标赋值i值,等自动调用的时候,set方法里面的i值,就会用从新赋值的值
}
olist[k].style.background='#fff';
}
//点击左按钮
oLbtn.onclick=function(){
i--;
if(i<0){
i=5;
}
oul.style.left=-(oli[i].offsetWidth*i)+'px';
Border(i)
}
//点击右按钮
oRbtn.onclick=function(){
i++;
if(i>5){
i=0;
}
oul.style.left=-(oli[i].offsetWidth*i)+'px';
Border(i)
}
//3.封装的原点变色
function Border(index){
for(var j=0; j<olist.length; j++){
olist[j].style.background='#fff';
}
olist[index].style.background='blue';
}
</script>
</html>