php制作小米轮播图,JS实现小米轮播图

原生JS仿小米轮播图(最新版易懂)，供大家参考，具体内容如下

本次内容主要可实现的效果:

自动轮播

可点击上一张 下一张进行图片的切换

点击右下方小圆点进行图片切换

代码部分:

H5:

• 
• 
• 
• 
• 

<

>

CSS部分:

.wrap {

width: 800px;

height: 400px;

position: relative;

}

.list {

width: 800px;

height: 400px;

list-style: none;

position: relative;

padding-left: 0px;

}

.item {

position: absolute;

width: 100%;

height: 100%;

color: white;

font-size: 50px;

opacity: 0.6;

transform: all .8s;

}

.item img{

width: 800px;

height: 400px;

}

.btn {

width: 50px;

height: 100px;

position: absolute;

top: 150px;

z-index: 100;

}

#goPre {

left: 0px;

}

#goNext {

right: 0px;

}

.item.active {

opacity: 1;

z-index: 10;

}

.pointList{

padding-left: 0;

list-style: none;

position: absolute;

right: 20px;

bottom: 20px;

z-index: 1000;

}

.point{

width: 10px;

height: 10px;

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

border-radius: 50%;

float: left;

margin-right: 16px;

border-style: solid;

border-width: 2px;

border-color: rgba(255,255,255, 0.6);

cursor: pointer;

}

.point.active{

background-color: rgba(255,255,255,0.4);

}

JS部分

//获取节点

var items = document.getElementsByClassName('item')//图片

var goPreBtn = document.getElementById('goPre');

var goNextBtn = document.getElementById('goNext');

//获取点

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

var time=0;//定时器图片跳转参数

var index = 0; //表示第几张图片在展示

//可以展示第几个点

var clearActive=function(){

for(var i=0;i

items[i].className='item';

points[i].className='point';

}

}

var goIndex=function(){

clearActive();

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

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

}

var goNext=function(){

if(index<4){

index++;

}else{

index=0;

}

goIndex();

}

var goPre=function(){

if(index==0){

index=4;

}else{

index--;

}

goIndex();

}

//点击下一张切换图片

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

goNext();

time=0;

})

//点击上一张进行切换图片

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

goPre();

time=0;

})

for(var i=0;i

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

var pointIndex=this.getAttribute('data-index');

index=pointIndex;

goIndex();

time=0;

})

}

//自动轮播定时器

setInterval(function(){

time++;

if(time==20){

goNext();

time=0;

}

},100)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。