直接上代码。。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#rollImg{height: 346px;width: 686px;position: relative;margin: 0 auto;overflow: hidden;}
#imgCon{height: 346px;width:3430px;font-size: 0;position: absolute;left: 0;transition: 1.5s;}
#imgCon img{height: 346px;width: 686px;}
ul{list-style: none;position: absolute;bottom: 10px;left: 230px;}
li{border:1px solid red;border-radius: 8px;width: 16px;height: 16px;margin-left: 10px;float: left;background-color:rgba(255,0,0,0) ;}
</style>
</head>
<body>
<div id="rollImg">
<div id="imgCon">
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/img4.jpg">
<img src="img/img5.jpg">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var imgCon,liList,preLi;
init();
function init(){
imgCon = document.getElementById("imgCon");
liList = Array.from(document.getElementsByTagName("li"));
for(var i=0;i<liList.length;i++){
liList[i].addEventListener("click",liclickHandler)
}
preLi = liList[0];
}
function liclickHandler(){
position = liList.indexOf(this);
imgCon.style.left = -686*position+"px";
if(preLi){
preLi.style.backgroundColor="rgba(255,0,0,0)";
}
preLi = liList[position];
preLi.style.backgroundColor="rgba(255,0,0,0.8)"
}
</script>
</html>
效果如下：
