2201_75340854 2023-06-15 11:27 采纳率: 31.8%
浏览 31
已结题

想让中间图片变成可以轮换的

设计了一个页面，想让中间图片几秒钟轮换，就网上下面有几个小点那种，在代码里加哪一串呀

img

  • 写回答

1条回答 默认 最新

  • java入门选手 2023-06-15 11:34
    关注

    我这里有个轮播图片的例子你可以参考下

    <!DOCTYPE html>
<html>
<head>
    <style>
        .slideshow {
            display: none; /* 初始隐藏轮播图 */
        }
    </style>
</head>
<body>
    <div class="slideshow">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        // 获取轮播图元素
        var slideshow = document.querySelector('.slideshow');
        // 获取所有图片元素
        var images = slideshow.getElementsByTagName('img');
        // 设置初始索引和轮播间隔时间（单位：毫秒）
        var currentIndex = 0;
        var interval = 3000;

        // 轮换图片函数
        function rotateImages() {
            // 隐藏当前显示的图片
            images[currentIndex].style.display = 'none';
            // 计算下一张图片的索引
            currentIndex = (currentIndex + 1) % images.length;
            // 显示下一张图片
            images[currentIndex].style.display = 'block';
        }

        // 初始化轮播图
        images[currentIndex].style.display = 'block';

        // 每隔指定时间调用轮换图片函数
        setInterval(rotateImages, interval);
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 6月23日
  • 已采纳回答 6月15日
  • 创建了问题 6月15日

悬赏问题

  • ¥15 钢岔管添加弹性约束模拟围岩作用
  • ¥15 AD9164瞬时带宽1.8G，怎么计算出来？
  • ¥20 为什么安装CSiBridge时出现了这个问题，尝试了很多方法都不行，求详细操作步骤？
  • ¥15 鼠标右键，撤销删除 复制 移动，要怎样删除
  • ¥15 使用MATLAB进行余弦相似度计算加速
  • ¥15 服务器安装php5.6版本
  • ¥15 我想用51单片机和数码管做一个从0开始的计数表 我写了一串代码 但是放到单片机里面数码管只闪烁一下然后熄灭
  • ¥20 系统工程中，状态空间模型中状态方程的应用。请猛男来完整讲一下下面所有问题
  • ¥15 我想在WPF的Model Code中获取ViewModel Code中的一个参数
  • ¥15 arcgis处理土地利用道路 建筑 林地分类