1. <body>
  2.     <div class="content">
  3.         <div id="list">
  4.             <img src="images/01.png" alt="">
  5.             <img src="images/02.png" alt="">
  6.             <img src="images/03.png" alt="">
  7.             <img src="images/04.png" alt="">
  8.             <img src="images/05.png" alt="">
  9.         </div>
  10.         <button id="prev"></button>
  11.         <button id="next"></button>
  12.         <div id="btns">
  13.             <span class="current"></span>
  14.             <span></span>
  15.             <span></span>
  16.             <span></span>
  17.             <span></span>
  18.         </div>
  19.     </div>
  20.     <script>
  21.         $(function () {
  22.             var index = 0;
  23.             // 1.点击next
  24.             $("#next").click(function () {
  25.                 index++;
  26.                 if (index > 4) {
  27.                     index = 0;
  28.                 }
  29.                 animate(index);
  30.             })
  31.             // 2.点击prev
  32.             $("#prev").click(function () {
  33.                 index--;
  34.                 console.log(index);
  35.                 if (index < 0) {
  36.                     index = 4;
  37.                 }
  38.                 animate(index);
  39.             })
  40.             // 3.焦点随左右按钮变化
  41.             function animate(index) {
  42.                 $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
  43.                 $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
  44.             }
  45.             // 4.点击按钮,让对应的图片出现
  46.             $("#btns span").click(function(){
  47.                 $(this).addClass("current").siblings().removeClass("current");
  48.                 index = $(this).index();
  49.                 $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
  51.             })
  52.         })
  53.     </script>
  54. </body>

方法2

  1.  <style>
  2.        .parent{
  3.            position: relative;
  4.           margin-left: 300px;
  5.        }
  6.        .parent>div{
  7.            width: 600px;
  8.            height: 400px;
  9.            position: absolute;
  10.        }
  11.        .parent>div img{
  12.            width: 100%;
  13.            height: 100%;
  14.        }
  15.        ul{
  16.            overflow: hidden;
  17.            transform: translateY(450px);
  18.            margin-left: 280px;
  19.        }
  20.        ul li{
  21.            float: left;
  22.            width: 60px;
  24.            margin-left: 100px;
  25.        }
  26.        .li1{
  27.            color: red;
  28.        }
  29.    </style>
  31. <body>
  32.     <div class="parent">
  33.         <div><img src="./images/351.jpg" alt=""></div>
  34.         <div><img src="./images/352.jpg" alt=""></div>
  35.         <div><img src="./images/353.jpg" alt=""></div>       
  36.     </div>
  37.     <ul>
  38.         <li class="li1">1</li>
  39.         <li>2</li>
  40.         <li>3</li>
  41.     </ul>
  42.     <script>
  43.         var divs = document.querySelectorAll(".parent div");
  44.         var lis = document.querySelectorAll("ul li");
  45.        for(var i=0;i<lis.length;i++){
  46.            lis[i].index = i;
  47.            lis[i].onclick = function(){
  49.                for(var i=0;i<lis.length;i++){
  50.                    lis[i].className="";
  51.                }
  52.                this.className="li1";
  54.                for(var i=0;i<lis.length;i++){
  55.                    divs[i].style.display = "none"
  57.                }
  58.                divs[this.index].style.display="block"
  59.            }
  60.        }
  62.     </script>