swiper 无缝滚动，走马灯

最新推荐文章于 2024-06-14 14:03:09 发布

zsy16111

最新推荐文章于 2024-06-14 14:03:09 发布

阅读量7.5k

点赞数 4

分类专栏：前端文章标签：走马灯 swpier 无缝滚动轮播图

本文链接：https://blog.csdn.net/zsy16111/article/details/102814979

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">

  <!-- Demo styles -->
  <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-container1 {
      width: 100%;
      height: 50%;
    }
    .swiper-container2 {
      width: 100%;
      height: 50%;
    }
    .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-wrapper{
		transition-timing-function: linear !important;
	}
  </style>

</head>
<body>
  <!-- Swiper -->
	<div class="swiper-container1">
    	<div class="swiper-wrapper">
	      	<div class="swiper-slide"><img src="testImg/1.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/2.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/3.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/4.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/5.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/6.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/7.png" alt=""></div>
	      	<div class="swiper-slide"><img src="testImg/8.png" alt=""></div>
	    </div>
  	</div>
	
  <!-- Swiper JS -->
  <script src="js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var mySwiper1 = new Swiper ('.swiper-container1', {
        loop: true,
        speed:2000,//匀速时间
	    autoplay: {
	    	delay: 0,
	    	stopOnLastSlide: false,
	    	disableOnInteraction: false,
	    },
    })
  </script>
  
</body>
</html>