Html图片轮播遍历,javaScript 简单轮播图实现

Document

.crousel

{

width:1500px;

height: 500px;

margin: auto;

position: relative;

overflow: hidden;

}

.imgCon{

width:7500px;

height: 500px;

position: absolute;

font-size: 0;

transition: all 0.5s;

left:0;

}

.imgCon>img{

width:1500px;

height: 500px;

}

.leftBn,.rightBn{

position: absolute;

top:220px;

}

.leftBn{

left:50px;

}

.rightBn{

right: 50px;

}

ul{

list-style: none;

position: absolute;

margin: 0;

padding: 0;

bottom: 50px;

left:640px;

}

li{

width: 28px;

height: 28px;

border: 2px solid #FF0000;

float: left;

border-radius: 50%;

margin-left: 20px;

}

li:nth-child(1){

margin-left: 0;

}

.clear::after

{

content: "";

height: 0;

display: block;

visibility: hidden;

clear: both;

}

.clear{

zoom: 1;

}

var imgCon,leftBn,rightBn,list,prevDot;

var pos=0;

init();

function init(){

// 获取所有图片容器，左右按钮

imgCon=document.querySelector(".imgCon");

leftBn=document.querySelector(".leftBn");

rightBn=document.querySelector(".rightBn");

// 将所有li获取并且转换为数组

list=Array.from(document.querySelectorAll("li"));

// 给左右按钮增加点击事件

leftBn.οnclick=clickHandler;

rightBn.οnclick=clickHandler;

// list是所有小圆点的数组，遍历这个数组

list.forEach(function(item){

// 给每个小圆点增加点击事件

item.οnclick=dotClickHandler;

});

changeDot();

}

function clickHandler(){

// 如果点击左边的按钮

if(this===leftBn){

pos--;

if(pos<0) pos=4;

}else{

// 如果点击了右边的按钮

pos++;

if(pos>4) pos=0;

}

imgCon.style.left=pos*-1500+"px";

changeDot();

}

function dotClickHandler(){

// this就是被点击的元素，list是所有小圆点的数组

// 查找当前点击小圆点是数组中第几个，这个第几个正好就是我们要显示第几张图片

pos=list.indexOf(this);

imgCon.style.left=pos*-1500+"px";

changeDot();

}

function changeDot(){

// 如果上一个小圆点变量存在时

if(prevDot){

// 设置上一个小圆点的背景色透明

prevDot.style.backgroundColor="rgba(255,0,0,0)";

}

// list是小圆点的数组，pos是当前应该显示第几张图

// 将上一个小圆点变量设置为当前这个小圆点数组中对应的那个小圆点

prevDot=list[pos];

// 并且设置当前这个小圆点背景色为红色

prevDot.style.backgroundColor="rgba(255,0,0)";

}

效果图

Like

Like

Love

Haha

Wow

Sad

Angry

7