html关于图片轮播的实现（静态网页2）

最新推荐文章于 2024-09-11 23:16:45 发布

alsdiuhfeircn

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/alsdiuhfeircn/article/details/90700065

版权

实现步骤

1，网页下载swiper插件（eg.swiper-4.5.0）

2，<link>标签：

<link rel="stylesheet" href="../css/swiper.min.css">

3，<div>框架：

 <div>
			<b style="font-size:20px;margin-left:10px">新闻专区</b>
			<b style="font-size:15px;margin-left:5px;color:rgba(0,0,0,0.5)">NEWS</b>
 </div>

 <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
              <img src="../img/pic1.png" style="width: 100%;height: 100%;">
        </div>
        <div class="swiper-slide"><img src="../img/pic2.jpg" style="width: 
            100%;height: 100%;">
        </div>
        <div class="swiper-slide"><img src="../img/pic3" style="width: 
             100%;height: 100%;">
        </div>
      </div>
        <div class="swiper-pagination" style="margin-left:110px;"><!-- Add Pagination -->
        </div> 
 </div>

4，<script>脚本实现：

<script src="../js/swiper.min.js"></script>
            <!-- Initialize Swiper -->
<script> 
    var swiper = new Swiper('.swiper-container', {
    pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true,
     },
   });
</script>

5，动态效果