<style>
 /*設(shè)置body*/
 body{
 margin:0;
 padding:0;
 font:16px "微軟雅黑",sans-serif;
 }
 /*設(shè)置輪播圖的邊框相對(duì)定位*/
 .play-box{
 position:relative;
 width:500px;
 height:313px;
 margin:100px auto;
 border:1px solid #ccc;
 }
 /*設(shè)置邊框下的圖片*/
 .play-box img{
 width:500px;
 height:313px;
 border:0;
 }
 /*設(shè)置超鏈接下的所有圖片不顯示*/
 .play-box a{
 display:block; /*現(xiàn)在是文本狀態(tài)，要修改為塊狀*/
 overflow:hidden; /*隱藏超過(guò)邊框高度的圖片*/
 opacity:0; /*默認(rèn)圖片為全透明*/
 height:0; /*默認(rèn)高度為0*/
 transition:opacity .5s; /*默認(rèn)透明度過(guò)渡時(shí)間為0.5s*/
 }
 /*設(shè)置當(dāng)前圖片顯示*/
 #imgList a.current{
 opacity:1; /*默認(rèn)圖片顯示*/
 height:auto; /*默認(rèn)高度為自動(dòng)*/
 }
 /*設(shè)置列表ul*/
 ul{
 margin:0;
 padding:0;
 list-style:none;
 }
 /*設(shè)置列表ul下的li*/ 
 ul li{
 width:10px;
 height:10px;
 margin:0 4px;
 font-size:0;
 border-radius:50%;
 background-color:#fff;
 cursor:pointer;
 float:left;
 }
 /*當(dāng)圖片變化時(shí)，圖標(biāo)也跟著變化*/
 ul li.current{
 background-color:red;
 }
 /*設(shè)置圖標(biāo)絕對(duì)定位*/
 .iconList{
 position:absolute;
 bottom:10px;
 left:50%;
 margin-left:-45px;
 }
 /*設(shè)置向左向右圖標(biāo)*/
 .sliderbar{
 position:absolute;
 top:50%;
 margin-top:-25px;
 width:30px;
 height:50px;
 font-family:simsun;
 color:#fff;
 text-align:center;
 line-height:50px;
 background-color:#000;
 opacity:.6;
 display:none;
 cursor:pointer;
 }
 /*設(shè)置向左圖標(biāo)*/
 .slidebar-left{
 left:0;
 }
 /*設(shè)置向右圖標(biāo)*/
 .slidebar-right{
 right:0;
 }
</style>

<!--輪播圖邊框-->
 <div id="playBox" class="play-box">
 <!--圖片列表-->
 <div id="imgList">
  <a href="#" target="_blank" class="current">
  <img src="image/5.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/6.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/7.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/8.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/9.jpg"/>
  </a>
 </div>
 <!--圖標(biāo)列表-->
 <div class="iconList">
  <ul>
  <li class="current">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </div>
 <!--左箭頭-->
 <div class="sliderbar slidebar-left"><</div>
 <!--右箭頭-->
 <div class="sliderbar slidebar-right">></div>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
 $(document).ready(function(){
 //設(shè)置變量速度為3秒
 var speed = 3000;
 //循環(huán)變量為1，是避免定時(shí)器再等第一章圖片
 var m = 1;
 //設(shè)置定時(shí)器的函數(shù)和時(shí)間
 var playTimer = setInterval(runPlay,speed);
 //定時(shí)函數(shù)
 function runPlay(){
 //判讀如果m大于4，就設(shè)置m=0
 if(m>4){
 m=0;
 }
 //調(diào)用controlPlay函數(shù)來(lái)控制圖片變化
 controlPlay(m);
 m++;
 }
 //通過(guò)參數(shù)控制圖片的變化,圖標(biāo)變化
 function controlPlay(n){
 $("#imgList a").removeClass("current").eq(n).addClass("current");
 $("ul li").removeClass("current").eq(n).addClass("current");
 }
 //給整個(gè)輪播圖綁定鼠標(biāo)事件，當(dāng)鼠標(biāo)放到輪播圖上停止輪播圖，當(dāng)鼠標(biāo)離開輪播圖繼續(xù)滾動(dòng)
 $("#playBox").mouseenter(function(){
 //停止定時(shí)
 clearInterval(playTimer);
 //左右控制按鈕顯示
 $(".sliderbar").fadeIn(300);
 }).mouseleave(function(){
 //重新開始定時(shí)
 playTimer =setInterval(runPlay,speed);
 //左右控制按鈕隱藏
 $(".sliderbar").fadeOut(300);
 });
 //給li綁定控制圖標(biāo)綁定單擊事件
 $("ul li").click(function(){
 controlPlay($(this).index());
 //鼠標(biāo)點(diǎn)擊過(guò)后修改m的值
 m =$(this).index()+1;
 }).hover(function(){
 //給li取消鼠標(biāo)懸停的冒泡
 return false;
 })
 //給左右的控制圖標(biāo)取消 鼠標(biāo)懸停的冒泡
 $(".sliderbar").hover(function(){
 return false;
 })
 //下一張圖片
 $(".slidebar-right").click(function(){
 //判斷m的值
 if(m>4){
 m=0;
 }
 //顯示下一站圖片
 controlPlay(m);
 m ++;
 })
 //上一張圖片
 $(".slidebar-left").click(function(){
 //m默認(rèn)顯示下一張，所以為了顯示上一張，m必須減2
 m -= 2;
 if(m<0){
 m=4;
 }
 //顯示上一張圖片
 controlPlay(m);
 //保證m要顯示下一張
 m ++;
 }) 
 });
</script>