50行Jquery代码写轮播图

最新推荐文章于 2025-04-20 16:47:23 发布

TheFlangeUndead

最新推荐文章于 2025-04-20 16:47:23 发布

阅读量883

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/TheFlangeUndead/article/details/125758729

版权

本文介绍如何使用CSS布局和jQuery库来创建一个响应式的图片轮播效果，包括隐藏和显示图片以及使用鼠标操作控制图片切换。同时展示了如何通过CSS和HTML实现导航点的样式和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css源文件

#slideshow {
    width: 1226px;
    height: 460px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

#pre {
    position: absolute;
    top: 210px;
    left: 195px;
    width: 50px;
    height: 100px;
    font-size: 40px;
    opacity: 0.5;
    cursor: pointer;/* 让鼠标指针在上面时，改变形状 */
}

#next {
    position: absolute;
    top: 210px;
    left: 1330px;
    width: 50px;
    height: 100px;
    font-size: 40px;
    opacity: 0.5;
    cursor: pointer;
}

#imglist li {
    position: absolute;
    opacity: 1;
    display: block;
}

#dotlist {
    position: absolute;
    bottom: 30px;
    width: 100px;
    right: 0px;
    list-style: none;/* 取消无序列表每行前面的点 */
    display: flex;

}


div ul:last-child li{
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: rgb(206, 16, 16);
    opacity: 0.3;
    cursor: pointer;
     user-select: none;/*让用户无法点中选择 */
}

.arrow1 {
    font-size: 135px;
    color: white;
}

Html源文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/img.css" />
  </head>
  <body>
    <div id="slideshow">
      <ul id="imglist">
        <li><img src="img/banner01.jpg" alt="" /></li>
        <li><img src="img/banner02.webp" alt="" /></li>
        <li><img src="img/banner03.webp" alt="" /></li>
        <li><img src="img/banner01.webp" alt="" /></li>
      </ul>
      <ul id="dotlist">
        <!-- <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li> -->
      </ul>
    </div>
    <button id="pre"><</button>
    <button id="next">></button>
    <script src="js/jquery-3.5.1.js"></script>

承接上面，jquery代码

<script>
      //首先写一个入口函数
      $(function () {
        //因为第一张图片被后面的第四张图片覆盖了，所以现在需要先将第一张图片给显示出来
        $("#imglist li").eq(0).stop().fadeIn();
        $("#imglist li").eq(0).stop().siblings("li").fadeOut();
        //默认下标
        var index = 0;
        var length = $("#imglist li").length;
        var stopTime = 3000;
        //追加li标签下面的
        for (var i = 1; i <= length; i++) {
          $("#dotlist").append("<li>" + i + "</li>");
        }
        $("#dotlist li").eq(0).css("opacity", "1");
        //因为是后追加的，所以需要用父类注册点击事件
        $("#dotlist").on("click", "li", function () {
          index = $(this).index();
          indexImg();
        });

        //将相同的逻辑代码封装
        function indexImg() {
          for (var i = 0; i < length; i++) {
            $("#imglist li").eq(i).stop().fadeOut();
            $("#dotlist li").eq(i).css({ opacity: "0.3" });
          }
          $("#imglist li").eq(index).stop().fadeIn();
          $("#dotlist li").eq(index).css({ opacity: "1" });
        }

        //next按钮
        $("#next").click(function () {
          index++;
          if (index == 4) index = 0;
          indexImg();
        });

        //pre按钮
        $("#pre").click(function () {
          index--;
          if (index == -1) index = 3;
          indexImg();
        });

        //自动加载图片
        interval = setInterval(function () {
          index++;
          if (index == length) index = 0;
          indexImg();
        }, stopTime);

        //当鼠标放到图上的时候，停止计时器
        $("#imglist li").mouseover(function () {
          clearInterval(interval);
        });

        //鼠标离开时重新启动
        $("#imglist li").mouseout(function () {
          interval = setInterval(function () {
            index++;
            if (index == length) index = 0;
            indexImg();
          }, stopTime);
        });
    </script>
  </body>
</html>