1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="banner.css">
    9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    10.     <script src="banner.js"></script>
    11. </head>
    12. <body>
    13.     <div class="content">
    14.         <div class="list">
    15.             <img src="images/01.png" alt="">
    16.             <img src="images/02.png" alt="">
    17.             <img src="images/03.png" alt="">
    18.             <img src="images/04.png" alt="">
    19.             <img src="images/05.png" alt="">
    20.         </div>
    21.         <button id="left"></button>
    22.         <button id="right"></button>
    23.         <div id="btns">
    24.             <span class="current"></span>
    25.             <span></span>
    26.             <span></span>
    27.             <span></span>
    28.             <span></span>
    29.         </div>
    30.     </div>
    31. </body>
    32. </html>
    1. *{margin: 0;padding: 0;}
    2. .content{
    3.     position: relative;
    4.     width: 600px;
    5.     height: 400px;
    6.     margin-left: auto;
    7.     margin-right: auto;
    8.     border: 1px solid #333;
    9. }
    10. .list{
    11.     position: absolute;
    12.     width: 600px;
    13.     height: 400px;
    14. }
    15. .list img,#left{
    16.     position: absolute;
    17. }
    18. .list img:first-child{
    19.     z-index: 100;
    20. }
    21. #left,#right{
    22.     cursor: pointer;
    23.     top:50%;
    24.     transform: translateY(-50%);
    25.     z-index: 101;
    26.     width:40px;
    27.     height:70px;
    28.     background:url("images/icon-slides.png");
    29.     border:none;
    30.     position: absolute;
    31. }
    32. #left{
    33.     background-position-x:-86px
    34. }
    35. #left:hover{
    36.     background-position: 0;
    37. }
    38. #right:hover{background-position-x: -43px}
    39. #right{
    40.     position: relative;
    41.     left: 560px;
    42.     background-position-x:-125px;
    43. }
    45. #btns{
    46.     z-index: 101;
    47.     transform: translateX(40%);
    48.     bottom: 20px;
    49.     position: relative;
    50.     top: 300px;
    51. }
    52. #btns>span{
    53.     cursor: pointer;
    54.     width:20px;
    55.     height:20px;
    56.     z-index: 101;
    57.     display: inline-block;
    58.     border-radius: 50%;
    59.     border:1px solid #fff;
    60.     background-color:rgba(44,44,44,.3);
    61. }
    62. #btns .current{
    63.     background:orangered;
    65. }
    1. $(document).ready(function(){
    2.     var index =0;
    3.     /* 1.点击左边的按钮，每次index++*/
    4.     $("#right").click(function(){
    5.         /**1.定义下标，每次点击的时候，让index++ */
    6.         index++;
    7.         if(index>4){
    8.             index =0
    9.         }
    10.         console.log(index)
    11.         imgToggle(index,1000)
    13.     })
    14.     /* 2.点击左边的按钮，每次index--*/ 
    15.     $("#left").click(function(){
    16.         index--;
    17.         if(index<0){
    18.             index=4;
    19.         }
    20.         console.log(index)
    21.        imgToggle(index,1000);
    22.     })
    23.     /*点击对应焦点，对应的图片显示 */
    24.     $("#btns span").click(function(){
    25.         var num = $(this).index();
    26.         console.log(num)
    27.         /*重置下标 */
    28.         index = num;
    29.         imgToggle(num,1000)
    30.     })
    31.     /*封装的思想：将公用的部分封装在一起 */
    32.     function imgToggle(index,speed){
    33.         /**让对应的下标的焦点添加class=current，让其兄弟元素class="" */
    34.         $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
    35.         /**让对应的下标的图片显示，其他图片隐藏 */
    36.         $(".list img").eq(index).fadeIn(speed).siblings().fadeOut(speed);
    37.     }
    38.   function slide(){
    39.         time = setInterval(function(){
    40.             // 调用右键的函数
    41.             $("#next").click();
    42.         },2000)
    43.     }
    44.       slide();
    45. })