<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>myImages</title>
<style type="text/css">
img{
width: 100%;
}
.li_img{
width: 800px;
float: left;
list-style: none;
}
.ul_img{
width: 6000px;
padding:0px;
margin: 0px;
transition: all 2s;
}
.main_div{
width: 800px;
overflow: hidden;
position: relative;
top: 100px;
left: 350px;
}
.arrows{
z-index: 9999;
position: absolute;
padding-top: 230px;
width: 800px;
}
.arrows span{
font-size: 3em;
color: seashell;
}
.arrows span:hover {
cursor: pointer;
background-color: rgba(192, 192, 192, 0.29);
}
.div_btn{
float: left;
border-radius: 100px;
background-color: aquamarine;
width: 60px;
height: 10px;
margin-left: 10px;
margin-top: 130px;
}
.div_btn:hover{
background-color:aqua;
}
</style>
</head>
<body>
<div class = "main_div">
<div class = "arrows">
<span title="1" class="arrow"><</span>
<span title="0" class="arrow" style="float: right">></span>
</div>
<ul class="ul_img">
<li class="li_img"><img src="img/1.jpg"></li>
<li class="li_img"><img src="img/12.jpg"></li>
<li class="li_img"><img src="img/123.jpg"></li>
<li class="li_img"><img src="img/微信图片_202112151506269.jpg"></li>
</ul>
</div>
<div style="margin-left: 600px">
<div class="div_btn"></div>
<div class="div_btn"></div>
<div class="div_btn"></div>
<div class="div_btn"></div>
</div>
<script type="text/javascript" src="myscript.js"></script>
</body>
<script type="text/javascript">
//记录轮播的次数
var count = 0;
//轮播的方向,默认向右
var isgo = 0;
//第一计时器对象
var timer;
//获取ul元素
var ul_img = document.getElementsByClassName("ul_img")[0];
//获取所有li图片元素
var li_img = document.getElementsByClassName("li_img");
//第一部分，设置定时器
function showtime(){
timer = setInterval(function(){
if(isgo==false){ //isgo为false表示向右轮播
count++;
if(count>=li_img.length-1){ //如果轮播到右边界，往反方向轮播
count = li_img.length-1;
isgo=true;
}
//显示轮播到的当前图片，图片轮播的原理就是把图片排成一行，
//然后准备一个只有一张图片大小的容器，对这个容器设置超出部分隐藏，
//再控制定时器来让这些图片整体左移或右移，这样呈现出来的效果就是图片在轮播了
ul_img.style.transform = "translate("+ -800*count +"px)";
}else{ //isgo为true表示向左轮播
count--;
if (count<=0) { //如果轮播到左边界，往反方向轮播
count = 0;
isgo=false;
}
//显示轮播到的当前图片
ul_img.style.transform = "translate("+ -800*count +"px)";
}
for (var i = 0; i < div_btn.length; i++) {
//这里是给下面的圆角矩形设置颜色，当轮播到这张图片时，显示为深色，否则显示为浅色
div_btn[i].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua";
},4000);//每次延迟4秒钟
}
showtime();
//第二部分，为箭头添加事件
//获取控制方向的箭头元素
var arrow = document.getElementsByClassName("arrow");
//为箭头绑定事件
for(var i=0; i<arrow.length ;i++){
//鼠标悬停时
arrow[i].onmouseover = function(){
//停止计时器
clearInterval(timer);
}
//鼠标离开时，开始轮播
arrow[i].onmouseout = function(){
showtime();
}
//鼠标点击时，轮播一张图片
arrow[i].onclick = function(){
//区分左右箭头
if(this.title==0){ //点击的是右箭头时，往右轮播
count++;
if(count>3) {
count = 0;
}
}else{
count--;
if(count<0){
count=3;
}
}
//显示轮播到的当前图片
ul_img.style.transform="translate("+ -800*count+"px)";
for (var i = 0; i < div_btn.length; i++) {
div_btn[i].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua";
}
}
//第三部分
//鼠标悬停在底部圆角矩形的操作
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua"; //刚开始时，默认在第一张图，下面的圆角矩形应显示为深色
for (var i = 0; i<div_btn.length; i++) { //给每个圆角矩形添加事件
div_btn[i].index = i;
div_btn[i].onmouseover = function(){
//当鼠标落在某个圆角矩形时
clearInterval(timer); //停止定时器
for(var j=0;j<div_btn.length;j++){ //设置矩形的颜色
div_btn[j].style.backgroundColor="aquamarine";
}
div_btn[this.index].style.backgroundColor="aqua";
//控制方向，当鼠标停留在边界时，需设置轮播的方向，便于
//鼠标离开重新启动定时器时，轮播的方向正确
if (this.index==3) {
isgo = true;
}
if (this.index==0) {
isgo = false;
}
//让count值对应
count = this.index;
ul_img.style.transform = "translate("+ -800*this.index +"px)";
}
div_btn[i].onmouseout = function(){//鼠标离开时
//重新启动计时器
showtime();
}
}
</script>
</html>
