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

鱼C论坛

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

[已解决]网页轮播图

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

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

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

x
网页轮播图@FishC
最佳答案
月排行榜 / 总排行榜
liyifeng295641
2024-1-11 11:13:58
html:
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <link rel="stylesheet" href="css/bootstrap.css" />
  7.                 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.                 <script src="js/new_file.js" type="text/javascript"></script>
  9.                 <script src="js/bootstrap.bundle.js" type="text/javascript"></script>
  10.                 <script src="js/bootstrap.js" type="text/javascript"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">
  14.                         <h3>最基本的轮播图</h3>
  15.                         <div class="carousel slide" data-ride="carousel">
  16.                                 <div class="carousel-inner">
  17.                                         <div class="carousel-item active">
  18.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  19.                                         </div>
  20.                                         <div class="carousel-item ">
  21.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  22.                                         </div>
  23.                                         <div class="carousel-item ">
  24.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  25.                                         </div>
  26.                                         <div class="carousel-item ">
  27.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  28.                                         </div>
  29.                                 </div>
  30.                         </div>
  31.                         <h3>加入了左右控制按钮的轮播图</h3>
  32.                         <div class="carousel slide" data-ride="carousel" id="myCarousel">
  33.                                 <div class="carousel-inner">
  34.                                         <div class="carousel-item active">
  35.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  36.                                         </div>
  37.                                         <div class="carousel-item ">
  38.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  39.                                         </div>
  40.                                         <div class="carousel-item ">
  41.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  42.                                         </div>
  43.                                         <div class="carousel-item ">
  44.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  45.                                         </div>
  46.                                 </div>
  47.                                 <button class="carousel-control-prev" data-target="#myCarousel" data-slide="prev">
  48.                                         <span class="carousel-control-prev-icon">&laquo;</span>
  49.                                 </button>
  50.                                 <button class="carousel-control-next" data-target="#myCarousel" data-slide="next">
  51.                                         <span class="carousel-control-next-icon">&laquo;</span>
  52.                                 </button>
  53.                         </div>
  54.                         <h3>加入了指示器的轮播图</h3>
  55.                         <div class="carousel slide" data-ride="carousel" id="myCarousel1">
  56.                                 <ol class="carousel-indicators">
  57.                                         <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
  58.                                         <li data-target="#myCarousel1" data-slide-to="1" ></li>
  59.                                         <li data-target="#myCarousel1" data-slide-to="2" ></li>
  60.                                         <li data-target="#myCarousel1" data-slide-to="3" ></li>
  61.                                 </ol>
  62.                                 <div class="carousel-inner">
  63.                                         <div class="carousel-item active">
  64.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  65.                                         </div>
  66.                                         <div class="carousel-item ">
  67.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  68.                                         </div>
  69.                                         <div class="carousel-item ">
  70.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  71.                                         </div>
  72.                                         <div class="carousel-item ">
  73.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  74.                                         </div>
  75.                                 </div>
  76.                                 <button class="carousel-control-prev" data-target="#myCarousel1" data-slide="prev">
  77.                                         <span class="carousel-control-prev-icon">&laquo;</span>
  78.                                 </button>
  79.                                 <button class="carousel-control-next" data-target="#myCarousel1" data-slide="next">
  80.                                         <span class="carousel-control-next-icon">&laquo;</span>
  81.                                 </button>
  82.                         </div>
  83.                         <h3>加入了标题的轮播图</h3>
  84.                         <div class="carousel slide" data-ride="carousel">
  85.                                 <div class="carousel-inner">
  86.                                         <div class="carousel-item active">
  87.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  88.                                                 <div class="carousel-caption text-info">
  89.                                                         <h2>第一张轮播图的标题</h2>
  90.                                                         <!-- <p>第1张轮播图的说明</p> -->
  91.                                                 </div>
  92.                                         </div>
  93.                                         <div class="carousel-item ">
  94.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  95.                                                 <div class="carousel-caption text-info">
  96.                                                         <h2>第一张轮播图的标题</h2>
  97.                                                         <!-- <p>第1张轮播图的说明</p> -->
  98.                                                 </div>
  99.                                         </div>
  100.                                         <div class="carousel-item ">
  101.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  102.                                                 <div class="carousel-caption text-info">
  103.                                                         <h2>第一张轮播图的标题</h2>
  104.                                                         <!-- <p>第1张轮播图的说明</p> -->
  105.                                                 </div>
  106.                                         </div>
  107.                                         <div class="carousel-item ">
  108.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  109.                                                 <div class="carousel-caption text-info">
  110.                                                         <h2>第一张轮播图的标题</h2>
  111.                                                         <!-- <p>第1张轮播图的说明</p> -->
  112.                                                 </div>
  113.                                         </div>
  114.                                 </div>
  115.                         </div>
  116.                         <h3>淡入淡出的切换时间</h3>
  117.                         <div class="carousel slide" data-ride="carousel" data-interval="1000">
  118.                                 <div class="carousel-inner">
  119.                                         <div class="carousel-item active">
  120.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  121.                                         </div>
  122.                                         <div class="carousel-item">
  123.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  124.                                         </div>
  125.                                         <div class="carousel-item">
  126.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  127.                                         </div>
  128.                                         <div class="carousel-item">
  129.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  130.                                         </div>
  131.                                 </div>
  132.                         </div>
  133.                         <div class="carousel slide" data-ride="carousel">
  134.                                 <div class="carousel-inner">
  135.                                         <div class="carousel-item active" data-interval="1000">
  136.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  137.                                         </div>
  138.                                         <div class="carousel-item" data-interval="3000">
  139.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  140.                                         </div>
  141.                                         <div class="carousel-item">
  142.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  143.                                         </div>
  144.                                         <div class="carousel-item">
  145.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  146.                                         </div>
  147.                                 </div>
  148.                         </div>
  149.                 </div>
  150.         </body>
  151. </html>
复制代码


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

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

使用道具 举报

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

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


CSS代码：
  1. .slider {
  2.   width: 500px;
  3.   height: 300px;
  4.   overflow: hidden;
  5.   position: relative;
  6. }

  8. .slider img {
  9.   width: 100%;
  10.   height: 100%;
  11.   position: absolute;
  12.   top: 0;
  13.   left: 0;
  14.   opacity: 0;
  15.   transition: opacity 0.5s ease-in-out;
  16. }

  18. .slider img.active {
  19.   opacity: 1;
  20. }
复制代码


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

  6.   setInterval(function() {
  7.     images[currentIndex].className = '';
  8.     currentIndex = (currentIndex + 1) % images.length;
  9.     images[currentIndex].className = 'active';
  10.   }, 2000);
  11. };
复制代码


在上面的代码中，`.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:
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <link rel="stylesheet" href="css/bootstrap.css" />
  7.                 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.                 <script src="js/new_file.js" type="text/javascript"></script>
  9.                 <script src="js/bootstrap.bundle.js" type="text/javascript"></script>
  10.                 <script src="js/bootstrap.js" type="text/javascript"></script>
  11.         </head>
  12.         <body>
  13.                 <div class="container">
  14.                         <h3>最基本的轮播图</h3>
  15.                         <div class="carousel slide" data-ride="carousel">
  16.                                 <div class="carousel-inner">
  17.                                         <div class="carousel-item active">
  18.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  19.                                         </div>
  20.                                         <div class="carousel-item ">
  21.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  22.                                         </div>
  23.                                         <div class="carousel-item ">
  24.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  25.                                         </div>
  26.                                         <div class="carousel-item ">
  27.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  28.                                         </div>
  29.                                 </div>
  30.                         </div>
  31.                         <h3>加入了左右控制按钮的轮播图</h3>
  32.                         <div class="carousel slide" data-ride="carousel" id="myCarousel">
  33.                                 <div class="carousel-inner">
  34.                                         <div class="carousel-item active">
  35.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  36.                                         </div>
  37.                                         <div class="carousel-item ">
  38.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  39.                                         </div>
  40.                                         <div class="carousel-item ">
  41.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  42.                                         </div>
  43.                                         <div class="carousel-item ">
  44.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  45.                                         </div>
  46.                                 </div>
  47.                                 <button class="carousel-control-prev" data-target="#myCarousel" data-slide="prev">
  48.                                         <span class="carousel-control-prev-icon">&laquo;</span>
  49.                                 </button>
  50.                                 <button class="carousel-control-next" data-target="#myCarousel" data-slide="next">
  51.                                         <span class="carousel-control-next-icon">&laquo;</span>
  52.                                 </button>
  53.                         </div>
  54.                         <h3>加入了指示器的轮播图</h3>
  55.                         <div class="carousel slide" data-ride="carousel" id="myCarousel1">
  56.                                 <ol class="carousel-indicators">
  57.                                         <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
  58.                                         <li data-target="#myCarousel1" data-slide-to="1" ></li>
  59.                                         <li data-target="#myCarousel1" data-slide-to="2" ></li>
  60.                                         <li data-target="#myCarousel1" data-slide-to="3" ></li>
  61.                                 </ol>
  62.                                 <div class="carousel-inner">
  63.                                         <div class="carousel-item active">
  64.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  65.                                         </div>
  66.                                         <div class="carousel-item ">
  67.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  68.                                         </div>
  69.                                         <div class="carousel-item ">
  70.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  71.                                         </div>
  72.                                         <div class="carousel-item ">
  73.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  74.                                         </div>
  75.                                 </div>
  76.                                 <button class="carousel-control-prev" data-target="#myCarousel1" data-slide="prev">
  77.                                         <span class="carousel-control-prev-icon">&laquo;</span>
  78.                                 </button>
  79.                                 <button class="carousel-control-next" data-target="#myCarousel1" data-slide="next">
  80.                                         <span class="carousel-control-next-icon">&laquo;</span>
  81.                                 </button>
  82.                         </div>
  83.                         <h3>加入了标题的轮播图</h3>
  84.                         <div class="carousel slide" data-ride="carousel">
  85.                                 <div class="carousel-inner">
  86.                                         <div class="carousel-item active">
  87.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  88.                                                 <div class="carousel-caption text-info">
  89.                                                         <h2>第一张轮播图的标题</h2>
  90.                                                         <!-- <p>第1张轮播图的说明</p> -->
  91.                                                 </div>
  92.                                         </div>
  93.                                         <div class="carousel-item ">
  94.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  95.                                                 <div class="carousel-caption text-info">
  96.                                                         <h2>第一张轮播图的标题</h2>
  97.                                                         <!-- <p>第1张轮播图的说明</p> -->
  98.                                                 </div>
  99.                                         </div>
  100.                                         <div class="carousel-item ">
  101.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  102.                                                 <div class="carousel-caption text-info">
  103.                                                         <h2>第一张轮播图的标题</h2>
  104.                                                         <!-- <p>第1张轮播图的说明</p> -->
  105.                                                 </div>
  106.                                         </div>
  107.                                         <div class="carousel-item ">
  108.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  109.                                                 <div class="carousel-caption text-info">
  110.                                                         <h2>第一张轮播图的标题</h2>
  111.                                                         <!-- <p>第1张轮播图的说明</p> -->
  112.                                                 </div>
  113.                                         </div>
  114.                                 </div>
  115.                         </div>
  116.                         <h3>淡入淡出的切换时间</h3>
  117.                         <div class="carousel slide" data-ride="carousel" data-interval="1000">
  118.                                 <div class="carousel-inner">
  119.                                         <div class="carousel-item active">
  120.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  121.                                         </div>
  122.                                         <div class="carousel-item">
  123.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  124.                                         </div>
  125.                                         <div class="carousel-item">
  126.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  127.                                         </div>
  128.                                         <div class="carousel-item">
  129.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  130.                                         </div>
  131.                                 </div>
  132.                         </div>
  133.                         <div class="carousel slide" data-ride="carousel">
  134.                                 <div class="carousel-inner">
  135.                                         <div class="carousel-item active" data-interval="1000">
  136.                                                 <img src="img/banner-1.jpg" class="d-block w-100"/>
  137.                                         </div>
  138.                                         <div class="carousel-item" data-interval="3000">
  139.                                                 <img src="img/banner-2.jpg" class="d-block w-100"/>
  140.                                         </div>
  141.                                         <div class="carousel-item">
  142.                                                 <img src="img/banner-3.jpg" class="d-block w-100"/>
  143.                                         </div>
  144.                                         <div class="carousel-item">
  145.                                                 <img src="img/banner-4.jpg" class="d-block w-100"/>
  146.                                         </div>
  147.                                 </div>
  148.                         </div>
  149.                 </div>
  150.         </body>
  151. </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-4-28 21:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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