html轮播图实现-CSDN博客

本文链接：https://blog.csdn.net/qq_33697094/article/details/121378953
采用 Swiper 来实现轮播图。
需要用到 Swiper7.2.0 的 swiper-bundle.min.css和swiper-bundle.min.js 文件。下载地址：Swiper各版本
实现效果如下：
在这里插入图片描述
代码完整下载：
链接： https://pan.baidu.com/s/1NqAhPrnMlrmYtpfGFgjY3w
提取码： afd7
代码如下：
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="swiper-bundle.min.css">
	<style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
	  .swiper-button-prev ,.swiper-button-next{
	     --swiper-navigation-color: #007aff; /* 单独设置按钮颜色 */
		 --swiper-navigation-size: 20px;    /* 设置按钮大小 */
	  }
	  .swiper-slide .detail {
		height:100px;
		background:rgba(0,0,0,.7);
		position:absolute;
		width:100%;
		bottom:0;
		color:#fff;
		opacity:0;
		transition:opacity .3s .3s;
	}
	.swiper-slide-active .detail {
		opacity:1;
	}
	.swiper-slide .detail h3 {
		/*width:950px;*/
		margin:15px auto 0;
	}
	.swiper-slide .detail p {
		/*width:950px;*/
		margin:5px auto 0;
	}
	.swiper-slide .detail p span {
		/*width:950px;*/
		display:block;
	}
    </style>
</head>
<body>
    <script src="swiper-bundle.min.js"></script>

	<div class="swiper mySwiper">
	  <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/nature-1.jpg"> 
			<div class="detail">
                     <h3>1.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-2.jpg">
			<div class="detail">
                     <h3>2.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-3.jpg">
			<div class="detail">
                     <h3>3.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-4.jpg">
			<div class="detail">
                     <h3>4.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-5.jpg">
			<div class="detail">
                     <h3>5.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-6.jpg">
			<div class="detail">
                     <h3>6.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-7.jpg">
			<div class="detail">
                     <h3>7.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-8.jpg">
			<div class="detail">
                     <h3>8.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-9.jpg">
			<div class="detail">
                     <h3>9.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
      </div>
    </div>

	    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
	
	<script>
    var mySwiper = new Swiper ('.swiper', {
    //direction: 'vertical', // 垂直切换选项
	direction: 'horizontal',//水平切换
    loop: true, // 循环模式选项,true为不断循环
	speed:300,//两页之间的切换速度
	//autoplay: true,//可选选项，自动滑动轮播
	autoplay : {
		delay:2000,   //启用自动轮播并设置播放速度
		disableOnInteraction: false,//用户点击左右按钮手动切换之后，是否停止自动播放。默认为true：停止。
    },
	grabCursor : true, //鼠标放在轮播图上变为手掌

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
	  clickable :true,//点击分页器自动跳转（即点击图下的小圆点自动跳转到相应的轮播图）
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
    </script>
</body>
</html>