js 实现轮播图_var clearclass=function(){ for(var i=0;i<items.len-CSDN博客

本文链接：https://blog.csdn.net/Leo_01169/article/details/83143899

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

* {

margin: 0px;

padding: 0px;

}

.bigBox {

margin-left: 20px;

margin-top: 20px;

height: 400px;

width: 800px;

position: relative;

}

.oneUl {

height: 400px;

width: 800px;

list-style: none;

position: relative;

}

.item {

width: 100%;

height: 100%;

font-size: 60px;

color: antiquewhite;

text-align: center;

line-height: 400px;

position: absolute;

}

.item:nth-child(1) {

background-color: rgb(2, 223, 223);

}

.item:nth-child(2) {

background-color: rgb(109, 184, 219);

} .item:nth-child(3) {

background-color: rgb(209, 159, 32);

} .item:nth-child(4) {

background-color: rgb(253, 161, 176);

} .item:nth-child(5) {

background-color: rgb(144, 173, 76);

}

button {

position: absolute;

top: 50%;

margin-top: -30px;

height: 60px;

width: 40px;

z-index: 10;

transition: all 0.2s linear;

border: none;

outline: none;

background-color: rgba(0, 0, 0, 0.1);

font-size: 28px;

color: aliceblue;

}

button:hover {

cursor: pointer;

color: antiquewhite;

background-color: rgba(0, 0, 0, 0.3);

/* font-size: 30px; */

}

.right {

right: 0px;

}

.showLi{

z-index: 5;

}

.twoUl {

list-style: none;

position: absolute;

bottom: 10px;

left: 355px;

/* right: auto; */

z-index: 10;

}

.point {

height: 10px;

width: 10px;

background-color: white;

/* border:2px solid rgba(0, 0, 0, 0.2); */

float: left;

border-radius: 100%;

margin-right: 8px;

/* position: absolute; */

}

.point:hover {

cursor: pointer;

}

.showPoint {

background-color: rgba(92, 89, 89, 0.5)

}

</style>

<body>

</ul>

</ul>

</div>

var items = document.getElementsByClassName('item');

var goRightBut = document.getElementsByClassName('right')[0];

var goLeftBut = document.getElementsByClassName('left')[0];

var points = document.getElementsByClassName('point');

// console.log(goRightBut);

var index = 0;

var clearClass = function(){

for(var i = 0; i < items.length; i++){

items[i].className = 'item';

points[i].className = 'point';

}

var goIndext = function(){

clearClass();

items[index].className = 'item showLi';

points[index].className = 'point showPoint';

}

var goNext = function(){

if(index >= 4){

index = 0;

}

else {

index++

}

goIndext();

}

var goPre = function(){

if(index <= 0){

index = 4;

}

else {

index--;

}

goIndext();

}

goRightBut.addEventListener('click',function(){

goNext();

})

goLeftBut.addEventListener('click',function(){

goPre();

})

for (var i = 0; i < points.length; i++){

points[i].addEventListener('click',function(){

var pointindex = this.getAttribute('point-index');

index = pointindex

goIndext();

})

}

</script>

</body>

</html>