请问老师，点击圆点切换和点击箭头切换怎么写？实在没有思路了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现轮播图</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--轮播图-->
<div id="container">
    <img class="imgs img-active" src="img/1.jpg" width="1000px" height="400px">
    <img class="imgs" src="img/2.jpg" width="1000px" height="400px">
    <img class="imgs" src="img/3.jpg" width="1000px" height="400px">
    <img class="imgs" src="img/4.jpg" width="1000px" height="400px">
    <img class="imgs" src="img/5.jpg" width="1000px" height="400px">
    <!--箭头导航-->
<div class="arrow arrow1">
<img src="img/pre2.png">
</div>
<div class="arrow arrow2">
<img src="img/pre.png">
</div>
<!--圆点导航-->
<div id="dots">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="index.js"></script>
</script>
</body>
</html>

 *{margin: 0;padding:0; }
	 body{
		  font-style: 'Microsoft Yahei';
          background: '#ffffff';
	}
#container{
       width: 1000px;
       height: 400px;
       position: absolute;
       top:50%;
       left: 50%;
       margin-top: -200px;
       margin-left: -500px;
       border:  10px solid #bbb;
       background-color: #ffffff;
     }
     .imgs{
	       float: left;
	       display: none;
     }
   
  .img-active{
     	     display: block;
     }
     .arrow{
     	 position: absolute;
         top:50%;
         margin-top:-25px; 
         width:30px;
         height:50px;
         padding-top:16px;
         padding-left: 8px;
     }
     .arrow:hover{
     	background-color: grey;
     }
  .arrow1{ 
         left: 0;
           
  }
  .arrow2{
            right: 0;   
  }
      li{
      	display: inline-block;
      	padding:8px;
      	margin:5px;
      	border-radius: 8px;
        box-shadow:0 0 0 3px rgba(255,255,255,0.9) inset;
      	background: grey;
      }
     #dots{
      position: absolute;
      bottom: 10px;
      right: 10px;
     }
     .active{
     	 box-shadow:0 0 0 3px rgba(105,105,105,0.6) inset;
     	 background: white;
     }

$(function(){
	var main=$('#container');
	var imgs=$('.imgs');
	var arrow1=$('.arrow1');
	var arrow2=$('.arrow2');
	var li=$('li');
	var index=0;
    var timer=null;
    var len=imgs.length; 
    main.mouseover(function (event){
    	//鼠标滑过时停止自轮播
        if(timer) clearInterval(timer); //划过鼠标清除自动轮播；
    })
     main.mouseout(function(){
     	//鼠标离开时主动触发轮播
     	changimg()
     })

   function changimg(event){
    	//定时切换图片轮播和圆点
        timer=setInterval(function(){
            index++;
         if(index>=len){
              index=0;
           }
         $(imgs.eq(0)).css('display','none') ;
        $(imgs.eq(index)).css('display','block');
        $(imgs.eq(index-1)).css('display','none');
        //以下自动切换圆点
        li.eq(index-1).removeClass('active');
        li.eq(index).toggleClass('active')
    },2000);
     
    }
    
    main.mouseout() //自动在main上触发鼠标离开事件 
    
    li.click(function(event){ 
    	//点击圆点切换图片
 })
    arrow1.click(function(){
       //点击上一张箭头切换图片
    })
    arrow2.click(function(){
        //点击下一张箭头切换图片
    })
     
})

精慕门0318346 2018-08-05

源自：jQuery插件 1-13 作业题