jQuery----banner图（图片循环播放）

小叮当仁不让

已于 2023-12-15 09:43:53 修改

阅读量454

点赞数

分类专栏： jquery 文章标签： jquery 前端 javascript

于 2020-11-15 20:20:50 首次发布

本文链接：https://blog.csdn.net/qq_44971069/article/details/109708883

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

广告滚动播放，点击按钮切换，鼠标移入停止，鼠标移出继续轮播

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .wrapper {
        width: 600px;
        height: 350px;
        /* border: 1px solid red; */
        position: relative;
      }

      /* 5张图片叠加到一块 */
      .wrapper img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      }

      .wrapper img:nth-of-type(1) {
        display: block;
      }

      /* 小圆点 */
      .btn {
        width: 150px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        left: 225px;
        bottom: 10px;
        z-index: 100;
      }

      .btn span {
        display: block;
        width: 10px;
        height: 10px;
        border: 3px solid white;
        border-radius: 50%;
      }

      /* 左右箭头 */
      .wrapper a {
        text-decoration: none;
        font-size: 50px;
        color: rgb(149, 130, 130);
        position: absolute;
        top: 35%;
      }

      .wrapper a:nth-of-type(1) {
        left: 10px;
      }

      .wrapper a:nth-of-type(2) {
        right: 10px;
      }

      .active {
        background-color: rgb(150, 139, 139);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="contain">
        <img src="images/dd.jpg" alt="" />
        <img src="images/ll.jpg" alt="" />
        <img src="images/ff.jpg" alt="" />
        <img
          src="images/gg.jpg"
          alt=""
        />
        <img src="images/hh.jpg" alt="" />
      </div>
      <div class="btn">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <a href="javascript:void(0);">&lt;</a>
      <a href="javascript:void(0);">&gt;</a>
    </div>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
      var index = 0;
      // 点击上一张
      $("a:first").click(function () {
        prev_pic();
      });
      // 点击下一张
      $("a:last").click(function () {
        next_pic();
      });
      // 悬浮停止
      $(".wrapper").mouseover(function () {
        clearInterval(id);
      });
      $(".wrapper").mouseout(function () {
        autoplay();
      });

      // 下一张
      function next_pic() {
        index++;
        if (index > 4) {
          index = 0;
        }
        addStyle();
      }

      // 上一张
      function prev_pic() {
        index--;
        if (index < 0) {
          index = 4;
        }
        addStyle();
      }

      // 控制图片显示隐藏,小圆点背景色
      function addStyle() {
        $("img").eq(index).fadeIn();
        $("img").eq(index).siblings().fadeOut();
        $("span").eq(index).addClass("active");
        $("span").eq(index).siblings().removeClass("active");
      }

      // 自动轮播
      var id;
      autoplay();
      function autoplay() {
        id = setInterval(function () {
          next_pic();
        }, 3000);
      }
    </script>
  </body>
</html>

小叮当仁不让

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery----banner图（图片循环播放）

广告滚动播放，点击按钮切换，鼠标移入停止，鼠标移出继续轮播<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type
复制链接

扫一扫

专栏目录