html 轮播图

2023-07-18 06:24 作者：Admin

1、最近突然要做一个轮播图，原来做的一个demo轮播图不怎么适合：

 $(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();

2、然后，自己就凑合的写了一个（记得引入图片路径）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title>轮播图</title>
    <script
      typet="text/javascript"
      src="http://code.jquery.com/jquery-latest.js"
    ></script>
    <!-- css 样式-->
    <style type="text/css">
      ul,
      li,
      img {
        border: 0px;
        list-style-type: none;
      }
      .apl_home_img_first {
        width: 800px;
        height: 600px;
      }
      .home_slideshow {
        position: relative;
      }
      .apl_home_layered ul li {
        display: none;
      }
      .home_hoves {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .home_hover {
        cursor: pointer;
        position: relative;
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 12px;
        border-radius: 8px;
        background: #227FF;
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div class="apl_home_layered home_slideshow">
      <ul>
        <li style="display: block">
          <a href="#"
            ><img
              id="home_first_img"
              src="images/spring.jpg"
              class="apl_home_img_first"
              alt="1"
          /></a>
        </li>
        <li>
          <a href="#"
            ><img
              id="home_first_img"
              src="images/summer.jpg"
              class="apl_home_img_first"
              alt="2"
          /></a>
        </li>
        <li>
          <a href="#"
            ><img
              id="home_first_img2"
              src="images/autumn.jpg"
              class="apl_home_img_first"
              alt="3"
          /></a>
        </li>
        <li>
          <a href="#"
            ><img
              id="home_first_img3"
              src="images/winter.jpg"
              class="apl_home_img_first"
              alt="4"
          /></a>
        </li>
      </ul>
      <p class="home_hoves">
        <span class="home_hover"></span>
        <span class="home_hover"></span>
        <span class="home_hover"></span>
        <span class="home_hover"></span>
      </p>
    </div>
  </body>
  <script>
    var index = 0; //标记
    var time; //定时器
    $(document).ready(function () {
      var len = $(".apl_home_layered ul li").length;
      //循环
      function showstart() {
        index++;
        if (index == len) {
          index = 0;
        } //加载到最后一张，重新开始
        $(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();
        var i = $(".home_hoves span")
          .eq(index)
          .css("background-color", "#227FFE")
          .siblings()
          .css("background-color", "#777"); //得到该节点并设置背景样式，其它的兄弟节点设置背景样式
      }
      //定时
      function action() {
        time = setInterval(function () {
          showstart();
        }, 5000); //定时加载showstart()方法
      }
      //鼠标移入
      $(".home_hoves span").mouseover(function () {
        $(this)
          .css("background-color", "#227FFE")
          .siblings()
          .css("background-color", "#777");
        var s = $(this).index();
        $(".apl_home_layered ul li").eq(s).fadeIn(500).siblings().hide();
        //console.log(s);
        clearInterval(time); //移除定时器
      });
      //鼠标移出
      $(".home_hoves span").mouseout(function () {
        action(); //加载定时器
      });
      action(); //初始化加载action()方法
    });
  </script>
</html>

3、之前的轮播图：(这个是原生的，没用到jQuery，记得引入图片路径)

<html>
  <head>
    <title>轮播图</title>
  </head>
  <body align="center" onload="start()">
    <img id="imgs" src="images/spring.jpg" width="400px" height="400px" /><br />
    <span
      style="cursor: pointer; color: red"
      onmouseover="stop(0)"
      onmouseleave="start()"
      >春天</span
    >
    <span
      style="cursor: pointer; color: green"
      onmouseover="stop(1)"
      onmouseleave="start()"
      >夏天</span
    >
    <span
      style="cursor: pointer; color: yellow"
      onmouseover="stop(2)"
      onmouseleave="start()"
      >秋天</span
    >
    <span
      style="cursor: pointer; color: purple"
      onmouseover="stop(3)"
      onmouseleave="start()"
      >冬天</span
    >
  </body>
  <script>
    var index = 0;
    function showstart() {
      var image = [
        "images/spring.jpg",
        "images/summer.jpg",
        "images/autumn.jpg",
        "images/winter.jpg"
      ];
      var a = document.getElementsByTagName("img");
      a[0].src = image[index];
      index++;
      if (index == 4) {
        index = 0;
      }
    }

    var time;
    function start() {
      time = setInterval("showstart()", 1000);
    }

    function stop(i) {
      clearInterval(time);
      index = i;
      showstart();
    }
  </script>
</html>

4、拥有一个自己的主观思想，生活就很简单（生活不是学习，是调节）

生活中，有忧伤就有快乐；而我，是在快乐中忧伤；独行的路上，不是在享受着快乐，而是忍受着孤独，增强韧性，品味心声！

5、在工作中，会使用一个轮播的插件更好：swiper

文章来源：https://www.jianshu.com/p/d992bb1b29d1

标签： #轮播图 #HTML