<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<style>
/* 主体部分 */
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
width: 680px;
height: 340px;
}
#slider{
position: relative;
width: 680px;
height: 340px;
margin: 100px auto;
/* outline: 2px solid red; */
overflow: hidden;
}
.slider-list{
display: flex;
position: relative;
left: 0px;
width: 100%;
height: 100%;
/* transform: translateX(-680px); */
transition: all 1s;
}
.slider-list li{
width: 680px;
height: 340px;
}
/* 小点部分 */
.dot-list{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 2px 10px;
border-radius: 12px;
background-color: rgba(255, 255, 255, .3);
}
.dot-list .dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
}
.dot-list .dot.cur{
background-color: red;
}
/*箭头部分 */
.arraw{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.795);
display: none;
}
.prev{
left: 0;
}
.next{
right: 0;
}
.arraw span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%,50%);
width: 10px;
height: 10px;
border-bottom:2px solid white;
border-left:2px solid white;
}
.prev span{
transform: translate(-50%,-50%) rotate(45deg);
}
.next span{
transform: translate(-50%,-50%) rotate(-135deg);
}
#slider:hover .arraw{
display: block;
}
</style>
</head>
<body>
<div id="slider">
<!-- 图片部分 -->
<ul class="slider-list">
<!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
<li><a href="#"><img src="./img/demo1.jpg"></a></li>
<li><a href="#"><img src="./img/demo2.jpg"></a></li>
<li><a href="#"><img src="./img/demo3.jpg"></a></li>
<li><a href="#"><img src="./img/demo4.jpg"></a></li>
<li><a href="#"><img src="./img/demo5.jpg"></a></li>
<li><a href="#"><img src="./img/demo1.jpg"></a></li>
</ul>
<!-- 小点部分 -->
<div class="dot-list">
<span class="dot cur"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!--箭头布分 -->
<a href="#" class="arraw prev" id="left">
<span></span>
</a>
<a href="#" class="arraw next" id="right">
<span></span>
</a>
</div>
<script>
var slid =document.getElementById('slider');
var slidLis=slid.getElementsByTagName('ul')[0];
// var slidLis=document.querySelector(".slider-list")
var slidLi=slidLis.getElementsByTagName('li');
var lef = document.getElementById('left');
var righ = document.getElementById('right');
var index = 0;
function lun(){
index++;
circe();
slidLis.style.left=index*-680 + "px";
slidLis.style.transition="all 1s";
if(index === 5){
index= 0;
setTimeout(function(){
slidLis.style.left=0;
slidLis.style.transition="none";
},1000)
}
circe();
}
righ.addEventListener("click",lun);
lef.addEventListener("click",function(){
index--;
if(index === -1){
slidLis.style.left=5*-680 + "px";
slidLis.style.transition="none";
index = 4;
setTimeout(function(){
slidLis.style.left=index*-680 + "px";
slidLis.style.transition="all 1s";
},0);
}else{
slidLis.style.left=index*-680 + "px";
}
circe();
});
// 自动轮播
var autoplay = setInterval(lun,2000);
slid.addEventListener("mouseenter",function(){
clearInterval(autoplay);
});
slid.addEventListener("mouseleave",function(){
clearInterval;
autoplay = setInterval(lun,2000);
})
//小圆点
var dotList = document.getElementsByTagName('span');
function circe(){
for(var i = 0;i < dotList.length;i++){
if(i === index){
dotList[i].classList.add("cur");
}else{
dotList[i].classList.remove("cur");
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号