jsp页面、图片轮播

最新推荐文章于 2025-05-21 14:08:49 发布

一啸动千山

最新推荐文章于 2025-05-21 14:08:49 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： js swiper

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/sshbaibai/article/details/81316320

笔记专栏收录该内容

14 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsp轮播</title>
<link rel="stylesheet" href="css/swiper-4.3.3.min.css">
<style type="text/css">
   *{
       margin: 0;
       padding: 0;
   }
   html,body{
       width: 100%;
       height: 100%;
   }
   .swiper-container {
            width: 100%;
            height: 100%;
       }
</style>
</head>

<body>
   <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
           <iframe src="index.jsp" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="swiper-slide">
           <iframe src="index2.jsp" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="swiper-slide">
           <iframe src="index3.jsp" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
    
    <div class="swiper-pagination"></div>

    
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    
    
</div>

   <script type="text/javascript" src="js/swiper-4.3.3.min.js"></script>

   <script>
          var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true,

            // 如果需要分页器
              pagination: {
              el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
           /* scrollbar: {
              el: '.swiper-scrollbar',
              hide:true
            }, */
            autoplay:true
          })
</script>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。