<!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}
#rollImage
{
width: 960px;
height: 320px;
position: relative;
margin: auto;
overflow: hidden;
}
#imgCon{
position: absolute;
height: 320px;
transition: all 1s;
}
#dot{
list-style: none;
position: absolute;
bottom: 10px;
}
#dot>li
{
float: left;
width: 18px;
height: 18px;
border-radius: 11px;
border: 1px solid rgba(255,0,0,0.4);
background-color: rgba(255,0,0,0);
margin-left: 10px;
}
#left
{
position: absolute;
left:5px;
top:130px;
}
#right{
position: absolute;
right: 5px;
top:130px;
}
</style>
</head>
<body>
<div id="rollImage">
<div id="imgCon"></div>
<ul id="dot"></ul>
<img src="img/left.png" id="left">
<img src="img/right.png" id="right">
</div>
</body>
</html>
<script>
let imgCon,dot,left,right;
let imgList=["a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"];
let position=0;
let preDot;
init();
function init(){
imgCon=document.getElementById("imgCon");
dot=document.getElementById("dot");
left=document.getElementById("left");
right=document.getElementById("right");
for (let i=0;i<imgList.length;i++){
let img=new Image();
img.src="img/"+imgList[i];
imgCon.appendChild(img);
img.style.width="960px";
img.style.height="320px";
let li=document.createElement("li");
dot.appendChild(li);
}
// 第一次点的时候是空的
imgCon.style.left="0px";
imgCon.style.width=960*imgList.length+"px";
dot.style.left=(960-dot.offsetWidth)/2+"px";
dot.addEventListener("click",dotClickHandler);
preDot=dot.firstElementChild;
preDot.style.backgroundColor="rgba(255,0,0,0.8)";
left.addEventListener("click",bnClickHandler);
right.addEventListener("click",bnClickHandler);
}
function dotClickHandler(e){
for(let i=0;i<dot.children.length;i++){
if(dot.children[i]===e.target){
position=i;
}
}
imgCon.style.left=-position*960+"px";
changeDot();
}
// 左右按钮的函数
function bnClickHandler(){
if(this===left){
position--;
if(position<0){
position=imgList.length-1;
}
}else if(this===right){
position++;
if(position>imgList.length-1){
position=0;
}
}
imgCon.style.left=-position*960+"px";
changeDot();
}
// 小圆点跟随图片改变
function changeDot() {
preDot.style.backgroundColor="rgba(255,0,0,0)";
preDot=dot.children[position];
preDot.style.backgroundColor="rgba(255,0,0,0.6)";
}
</script>