设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 网页轮播图
返回列表 发新帖
查看: 416|回复: 2

[已解决]网页轮播图

[复制链接]
风吹沟子凉
发表于 2024-1-10 16:24:29 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
网页轮播图@FishC
最佳答案
月排行榜 / 总排行榜
liyifeng295641
2024-1-11 11:13:58
html:
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <link rel="stylesheet" href="css/bootstrap.css" />
                <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                <script src="js/new_file.js" type="text/javascript"></script>
                <script src="js/bootstrap.bundle.js" type="text/javascript"></script>
                <script src="js/bootstrap.js" type="text/javascript"></script>
        </head>
        <body>
                <div class="container">
                        <h3>最基本的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                        </div>
                        <h3>加入了左右控制按钮的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel" id="myCarousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                                <button class="carousel-control-prev" data-target="#myCarousel" data-slide="prev">
                                        <span class="carousel-control-prev-icon">«</span>
                                </button>
                                <button class="carousel-control-next" data-target="#myCarousel" data-slide="next">
                                        <span class="carousel-control-next-icon">«</span>
                                </button>
                        </div>
                        <h3>加入了指示器的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel" id="myCarousel1">
                                <ol class="carousel-indicators">
                                        <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
                                        <li data-target="#myCarousel1" data-slide-to="1" ></li>
                                        <li data-target="#myCarousel1" data-slide-to="2" ></li>
                                        <li data-target="#myCarousel1" data-slide-to="3" ></li>
                                </ol>
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                                <button class="carousel-control-prev" data-target="#myCarousel1" data-slide="prev">
                                        <span class="carousel-control-prev-icon">«</span>
                                </button>
                                <button class="carousel-control-next" data-target="#myCarousel1" data-slide="next">
                                        <span class="carousel-control-next-icon">«</span>
                                </button>
                        </div>
                        <h3>加入了标题的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <h3>淡入淡出的切换时间</h3>
                        <div class="carousel slide" data-ride="carousel" data-interval="1000">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                        </div>
                        <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active" data-interval="1000">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item" data-interval="3000">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                        </div>
                </div>
        </body>
</html>

效果图：
Screenshot 2024-01-11 at 11.09.22.png

求个最佳
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-1-10 16:25:01 | 显示全部楼层
嗨！要制作一个网页轮播图，你可以使用HTML、CSS和JavaScript来实现。下面是一个简单的例子：

HTML代码：
<div class="slider">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>

CSS代码：
.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

JavaScript代码：
window.onload = function() {
  var slider = document.querySelector('.slider');
  var images = slider.getElementsByTagName('img');
  var currentIndex = 0;

  setInterval(function() {
    images[currentIndex].className = '';
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].className = 'active';
  }, 2000);
};

在上面的代码中，`.slider`是一个具有指定宽度和高度的容器。`.slider img`是轮播图中的每个图片元素。通过设置`position: absolute;`属性，让图片重叠在一起，并且初始时只显示第一张图像。然后，通过JavaScript代码中的`setInterval`函数，循环切换每张图片的`active`类名，并使用CSS过渡效果。

请记得将`img1.jpg`，`img2.jpg`和`img3.jpg`替换为你自己的图片路径，并根据需要调整容器的宽度和高度。希望这可以帮助到你，祝你编程愉快！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

liyifeng295641
发表于 2024-1-11 11:13:58 | 显示全部楼层    本楼为最佳答案   
html:
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <link rel="stylesheet" href="css/bootstrap.css" />
                <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                <script src="js/new_file.js" type="text/javascript"></script>
                <script src="js/bootstrap.bundle.js" type="text/javascript"></script>
                <script src="js/bootstrap.js" type="text/javascript"></script>
        </head>
        <body>
                <div class="container">
                        <h3>最基本的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                        </div>
                        <h3>加入了左右控制按钮的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel" id="myCarousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                                <button class="carousel-control-prev" data-target="#myCarousel" data-slide="prev">
                                        <span class="carousel-control-prev-icon">«</span>
                                </button>
                                <button class="carousel-control-next" data-target="#myCarousel" data-slide="next">
                                        <span class="carousel-control-next-icon">«</span>
                                </button>
                        </div>
                        <h3>加入了指示器的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel" id="myCarousel1">
                                <ol class="carousel-indicators">
                                        <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
                                        <li data-target="#myCarousel1" data-slide-to="1" ></li>
                                        <li data-target="#myCarousel1" data-slide-to="2" ></li>
                                        <li data-target="#myCarousel1" data-slide-to="3" ></li>
                                </ol>
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                                <button class="carousel-control-prev" data-target="#myCarousel1" data-slide="prev">
                                        <span class="carousel-control-prev-icon">«</span>
                                </button>
                                <button class="carousel-control-next" data-target="#myCarousel1" data-slide="next">
                                        <span class="carousel-control-next-icon">«</span>
                                </button>
                        </div>
                        <h3>加入了标题的轮播图</h3>
                        <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                        <div class="carousel-item ">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                                <div class="carousel-caption text-info">
                                                        <h2>第一张轮播图的标题</h2>
                                                        <!-- <p>第1张轮播图的说明</p> -->
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <h3>淡入淡出的切换时间</h3>
                        <div class="carousel slide" data-ride="carousel" data-interval="1000">
                                <div class="carousel-inner">
                                        <div class="carousel-item active">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                        </div>
                        <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                        <div class="carousel-item active" data-interval="1000">
                                                <img src="img/banner-1.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item" data-interval="3000">
                                                <img src="img/banner-2.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-3.jpg" class="d-block w-100"/>
                                        </div>
                                        <div class="carousel-item">
                                                <img src="img/banner-4.jpg" class="d-block w-100"/>
                                        </div>
                                </div>
                        </div>
                </div>
        </body>
</html>

效果图：
Screenshot 2024-01-11 at 11.09.22.png

求个最佳

bootstrap07.zip

1.15 MB, 下载次数: 0
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 02:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表