<div class="outer">
 
 <ul class="img">
 <li><a><img src="../static/img/1.jpg"></a></li>
 <li><a><img src="../static/img/2.jpg"></a></li>
 <li><a><img src="../static/img/3.jpg"></a></li>
 <li><a><img src="../static/img/4.jpg"></a></li>
 </ul>
 
 
 <ul class="num">
 <li class="current">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
 
 <div class="left_btn btn"><</div>
 <div class="right_btn btn">></div>
</div>

<style>
 /*去掉默認瀏覽器樣式*/
 *{
 margin: 0;
 padding: 0;
 }
 /*去掉li標簽默認樣式*/
 li{
 list-style: none;
 }
 /*最外層盒子樣式處理：
 1.設置與輪播圖高寬一致
 2.設置縱向距頂部50px，水平居中
 3.設置自己為固定位置
 */
 .outer{
 height: 470px;
 width: 590px;
 margin: 50px auto;
 position:relative;
 }
 /*輪播圖片集合處理:
 1.將其設置為脫離文檔流
 2.設置距頂部和左側都為0
 */
 .img li{
 position: absolute;
 top: 0;
 left: 0;
 }
 /*順序按鈕區域處理：
 1.設置脫離文檔流
 2.通過設置text-align、width使其整體水平居中
 3.設置距離底部20px
 */
 .num{
 position: absolute;
 text-align: center;
 width: 100%;
 bottom: 20px;
 }
 /*順序按鈕處理:
 1.將其設置為行級及塊級兼容顯示
 2.設置其寬高
 3.設置背景色及字體顏色
 4.設置字體水平居中
 5.通過設置line-height與height一致，使其字體縱向居中
 6.設置其樣式為圓形
 7.增加按鈕左右間距
 */
 .num li{
 display: inline-block;
 width: 20px;
 height: 20px;
 background-color: darkgray;
 color: white;
 text-align: center;
 line-height: 20px;
 border-radius: 50%;
 margin: 0 20px;
 }
 /*左、右按鈕相同部分處理:
 1.設置其脫離文檔流
 2.設置其寬高
 3.設置背景色及字體顏色
 4.設置字體水平居中
 5.通過設置line-height與height一致，使其字體縱向居中
 6.通過設置top、margin-top使其整體縱向居中
 7.默認不顯示
 */
 .btn{
 position: absolute;
 width: 20px;
 height: 50px;
 background-color: darkgray;
 color: white;
 text-align: center;
 line-height: 50px;
 top: 50%;
 margin-top: -25px;
 display: none;
 }
 /*左側按鈕處理:
 設置左側為0
 */
 .left_btn{
 left: 0;
 }
 /*右側按鈕處理:
 設置右側為0
 */
 .right_btn{
 right: 0;
 }
 /*鼠標懸浮至輪播圖區域時左、右按鈕處理:
 1.設置左右按鈕顯示樣式為行級塊級兼容
 2.設置鼠標放置在左右按鈕時樣式為小手
 */
 .outer:hover .btn{
 display: inline-block;
 cursor: pointer;
 }
 /*設置順序按鈕初始按鈕樣式:
 設置為紅色（由于樣式級別問題會導致設置無效，可通過兩種方式解決：
 1.后面加上!important
 2.將css定位寫詳細，比如：.outer .num .current{……
 ）
 */
 .current{
 background-color: red!important;
 }
 
</style>

<script src="../static/jquery-3.3.1.min.js"></script>
<script>
 /*定義位置：由于圖片個數與下側順序按鈕數量一致，可通過位置進行關聯*/
 var index=0;
 /*當鼠標放到順序按鈕上時：
 1.將當前這個順序按鈕增加樣式為紅色背景
 2.移除周圍其他同級元素紅色背景樣式
 3.獲取當前順序按鈕的index
 4.通過index獲取該位置圖片
 5.一秒鐘漸入該圖片
 6.一秒鐘漸出其他相鄰圖片
 7.防止移動過快導致的效果閃現，使用stop方法
 */
 $(".num li").mousemove(function () {
  $(this).addClass("current").siblings().removeClass("current");
  index=$(this).index();
  $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
 });
 /*設置每一秒鐘自動輪播：
 1.獲取當前位置序號：自加操作；當超過圖片最大序號時序號設置為0
 2.設置下側順序按鈕及輪播圖顯示
 */
 var time=setInterval(move,1000);
 function move() {
 index++;
 if (index==4){
  index=0
 }
 $(".num li").eq(index).addClass("current").siblings().removeClass("current");
 $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
 };
 /*當鼠標劃入、劃出輪播圖區域時：
 1.劃入時停止自動輪播
 2.劃出時繼續自動輪播
 */
 $(".outer").hover(function () {
 clearInterval(time);
 },
 function () {
 time=setInterval(move,1000);
 });
 /*點擊右側按鈕時執行*/
 $(".right_btn").click(function () {
 move();
 });
 /*點擊左側按鈕時執行*/
 function moveL() {
  index--;
 if (index==-1){
  index=3
 }
 $(".num li").eq(index).addClass("current").siblings().removeClass("current");
 $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
 }
 $(".left_btn").click(function () {
 moveL();
 });
</script>