web技术

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

标签: #轮播图 #HTML
推荐文章
HTML5 Canvas是一种强大的Web技术,它允许我们使用JavaScript在网页上创建和...
在这个程序中,我们将使用JavaScript创建一个可以在屏幕上放烟花的效果。我...
轮播图在网站中几乎无处不在,占用地方少,交互性好。今天就来聊聊如何用vu...
大部分网站或APP的首页差不多都运用到了轮播图,下边就探讨一下关于轮播图的...
轮播图实现思路:1、img_ul类里面存放img标签,将需要展示的图片依次排开,在...
推荐专题
如何自己建网站?建网站难不难?其实建网站说难不难,说容易也并不容易,难...
本专题精心收集整理了多种HTML+CSS+JS轮播图实现方案,带详细代码和讲解,正...