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

<script src="../static/jquery-3.3.1.min.js"></script>
<script>
 /*定義位置：由于圖片個(gè)數(shù)與下側(cè)順序按鈕數(shù)量一致，可通過(guò)位置進(jìn)行關(guān)聯(lián)*/
 var index=0;
 /*當(dāng)鼠標(biāo)放到順序按鈕上時(shí)：
 1.將當(dāng)前這個(gè)順序按鈕增加樣式為紅色背景
 2.移除周?chē)渌?jí)元素紅色背景樣式
 3.獲取當(dāng)前順序按鈕的index
 4.通過(guò)index獲取該位置圖片
 5.一秒鐘漸入該圖片
 6.一秒鐘漸出其他相鄰圖片
 7.防止移動(dòng)過(guò)快導(dǎo)致的效果閃現(xiàn)，使用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);
 });
 /*設(shè)置每一秒鐘自動(dòng)輪播：
 1.獲取當(dāng)前位置序號(hào)：自加操作；當(dāng)超過(guò)圖片最大序號(hào)時(shí)序號(hào)設(shè)置為0
 2.設(shè)置下側(cè)順序按鈕及輪播圖顯示
 */
 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);
 };
 /*當(dāng)鼠標(biāo)劃入、劃出輪播圖區(qū)域時(shí)：
 1.劃入時(shí)停止自動(dòng)輪播
 2.劃出時(shí)繼續(xù)自動(dòng)輪播
 */
 $(".outer").hover(function () {
 clearInterval(time);
 },
 function () {
 time=setInterval(move,1000);
 });
 /*點(diǎn)擊右側(cè)按鈕時(shí)執(zhí)行*/
 $(".right_btn").click(function () {
 move();
 });
 /*點(diǎn)擊左側(cè)按鈕時(shí)執(zhí)行*/
 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>