一、原生JS

1-1 封装

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/index.css">
  9.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  10. </head>
  11. <body>
  12.     <div class="content">
  13.         <div id="list">
  14.             <img src="images/01.png" alt="">
  15.             <img src="images/02.png" alt="">
  16.             <img src="images/03.png" alt="">
  17.             <img src="images/04.png" alt="">
  18.             <img src="images/05.png" alt="">
  19.         </div>
  20.         <button id="prev"></button>
  21.         <button id="next"></button>
  22.         <div id="btns">
  23.             <span class="current"></span>
  24.             <span></span>
  25.             <span></span>
  26.             <span></span>
  27.             <span></span>
  28.         </div>
  29.     </div>
  30.     <script>
  31.         var prev = document.getElementById("prev")
  32.         var next = document.getElementById("next")
  33.         var lists = document.querySelectorAll("#list>img")
  34.         var icons = document.querySelectorAll("#btns>span")
  35.         /* 为了记录下标 */
  36.         var index = 0;
  37.         next.onclick = function(){
  38.             index++;
  39.             if(index>4){
  40.                 index=0;
  41.             }
  42.             show(index)
  43.         }
  44.         prev.onclick = function(){
  45.             index--;
  46.             if(index<0){
  47.                 index=4;
  48.             }
  49.             show(index)
  50.         }
  52.         for(let i=0;i<icons.length;i++){
  53.             icons[i].index=i;
  54.             icons[i].onclick = function(){
  55.                 let currentIndex = this.index;
  56.                 index=currentIndex;     //重置下标
  57.                 show(currentIndex)
  58.             }
  59.         }
  61.         //封装
  62.         function show(index){
  63.             for(let i=0;i<lists.length;i++){
  64.                 lists[i].style.display="none"
  65.             }
  66.             lists[index].style.display = "block"
  68.             for(let i=0;i<icons.length;i++){
  69.                 icons[i].classList.remove("current")
  70.             }
  71.             icons[index].classList.add("current")
  72.         }
  73.     </script>
  74. </body>
  75. </html>

1-2 不封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
    <div class="content">
        <div id="list">
            <img src="images/01.png" alt="">
            <img src="images/02.png" alt="">
            <img src="images/03.png" alt="">
            <img src="images/04.png" alt="">
            <img src="images/05.png" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var prev = document.getElementById("prev")
        var next = document.getElementById("next")
        var lists = document.querySelectorAll("#list>img")
        var icons = document.querySelectorAll("#btns>span")
        var index = 0;
        next.onclick = function () {
            index++;
            if (index > 4) {
                index = 0;
            }
            for (let i = 0; i < lists.length; i++) {
                lists[i].style.display = "none"
            }
            lists[index].style.display = "block"

            for (let i = 0; i < icons.length; i++) {
                icons[i].classList.remove("current")
            }
            icons[index].classList.add("current")
        }
        prev.onclick = function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            for (let i = 0; i < lists.length; i++) {
                lists[i].style.display = "none"
            }
            lists[index].style.display = "block"

            for (let i = 0; i < icons.length; i++) {
                icons[i].classList.remove("current")
            }
            icons[index].classList.add("current")
        }
        for (let i = 0; i < icons.length; i++) {
            icons[i].index = i;
            icons[i].onclick = function () {
                let currentIndex = this.index;
                index = currentIndex;

                for (let i = 0; i < lists.length; i++) {
                    lists[i].style.display = "none"
                }
                lists[index].style.display = "block"

                for (let i = 0; i < icons.length; i++) {
                    icons[i].classList.remove("current")
                }
                icons[index].classList.add("current")
            }
        }
    </script>
</body>

</html>

二、jQuery实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
    <div class="content">
        <div id="list">
            <img src="images/01.png" alt="">
            <img src="images/02.png" alt="">
            <img src="images/03.png" alt="">
            <img src="images/04.png" alt="">
            <img src="images/05.png" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var index = 0;
        $("#next").click(function () {
            // console.log($("#list>img").is(":animated"))
            if (!$("#list>img").is(":animated")) {
                index++;
                if (index > 4) {
                    index = 0;
                }
                animate(index)
            }
        })
        $("#prev").click(function () {
            if (!$("#list>img").is(":animated")) {
            index--;
            if (index < 0) {
                index = 4;
            }
            animate(index)
            }  
        })
        $("#btns span").click(function () {
            if (!$("#list>img").is(":animated")) {
            index = $(this).index()
            }
            animate(index)
        })
        function animate(index) {
            $("#list img").eq(index).fadeIn(1000).siblings().fadeOut(1000) //fadeIn  fadeOut 渐入渐出
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        }
    </script>
</body>

</html>