<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js轮播图</title>
<style>
*{margin:0;padding:0;}
.wrap{
width:590px;
height:470px;
background-color:red;
position:relative;
margin:50px auto;
}
.wrap ul{
width:590px;
height:470px;
}
.wrap ul li{
width:960px;
height:470px;
list-style:none;
float:left;
position:absolute;
opacity:0;
transition:all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari 和 Chrome */
-o-transition: all 2s; /* Opera */
}
.wrap .left{
display:inline-block;
width:80px;
height:60px;
position:absolute;
top:205px;
left:0;
font-size:30px;
z-index:10;
}
.wrap .right{
display:inline-block;
width:80px;
height:60px;
position:absolute;
top:205px;
right:0;
font-size:30px;
z-index:10;
}
.wrap .pointList{
width:96px;
height:15px;
position:absolute;
bottom:22px;
right:40px;
z-index:100;
}
.wrap .pointList .point{
width:12px;
height:12px;
border:1px solid black;
float:left;
margin-right:10px;
border-radius:100%;
background-color:#fff;
}
.wrap ul .show{
display:block;
z-index:10;
opacity:1;
}
.pointList .point.show{
background:green;
z-index:10
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="show"><img src="https://img20.360buyimg.com/babel/s590x470_jfs/t1/143671/13/779/56208/5ee77a4eE2c43007a/e208f572863d3384.jpg.webp" alt=""></li>
<li><img src="https://img11.360buyimg.com/pop/s590x470_jfs/t1/123133/28/4643/80761/5ee19e5bEdfb3b988/a4c9f91f8c9ed6a2.jpg.webp" alt=""></li>
<li><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/118475/13/9913/31481/5ee1e6bcE3f86cb18/3e771d066e7f349b.jpg.webp" alt=""></li>
<li><img src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/126222/14/4583/71641/5ee19bafE3c50e9ea/09feb9f8da0402f3.jpg.webp" alt=""></li>
</ul>
<button class="left"><</button>
<button class="right">></button>
<div class="pointList">
<div class="point show" data-index="0"></div>
<div class="point" data-index="1"></div>
<div class="point" data-index="2"></div>
<div class="point" data-index="3"></div>
</div>
</div>
<script>
//获取元素 图片li 两个按钮 几个小圆点
var lis = document.getElementsByTagName('li');
var leftBtn = document.getElementsByClassName('left')[0];
var rightBtn = document.getElementsByClassName('right')[0];
var points = document.getElementsByClassName('point');
// console.log(lis)
// console.log(leftBtn)
// console.log(rightBtn)
// console.log(points)
//制作一个索引数
var index = 0;
//清除所有show
var clearShow = function(){
for(var i=0;i<lis.length;i++){
lis[i].className = ''
}
for(var i=0;i<points.length;i++){
points[i].className = "point"
}
}
//实现一个跳转图片函数
var goIndex = function(){
clearShow();
lis[index].className = "show"
points[index].className = "point show"
}
//按钮向右切换
var goRight = function(){
if(index < 3){
index ++;
}else{
index = 0;
}
goIndex();
}
//按钮向左切换
var goLeft = function(){
if(index == 0){
index = 3;
}else{
index --;
}
goIndex();
}
//添加监听事件
rightBtn.addEventListener('click',function(){
goRight()
})
leftBtn.addEventListener('click',function(){
goLeft()
})
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index');
console.log(pointIndex);
index = pointIndex;
goIndex();
})
}
</script>
</body>
</html>
