基础滚动图 返回列表 默认说明 左码右览 上码下览 全屏代码 全屏预览 作者： 发布时间：0000-00-00 00:00:00 浏览次数：219 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模块名</title> <meta name="renderer" content="webkit"> <meta name="format-detection" content="telephone=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 如果是pc请删除下面一行 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <!-- 下面是初始化框架必须引入 --> <link rel="stylesheet" href="https://h5.org.cn/css/cui.css" /> <link rel="stylesheet" href="https://h5.org.cn/css/cui-rel.css" /> <script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script> <!-- 下面是你的样式表 --> <style> body{color: #333;font-size: 14px;line-height: 1.5;font-family:"微软雅黑","Microsoft Yahei";} .wp{width: 90%;max-width: 1200px;margin: 0 auto;} img{max-width: 100%;} .m-slider1{} .m-slider1 .swiper-slide{ height: 500px; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; } </style> </head> <body> <div class="swiper-container m-slider1"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image: url(images/banner1.jpg);"></div> <div class="swiper-slide" style="background-image: url(images/banner2.jpg);"></div> <div class="swiper-slide" style="background-image: url(images/banner1.jpg);"></div> <div class="swiper-slide" style="background-image: url(images/banner2.jpg);"></div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script> <script> var swiper = new Swiper('.m-slider1', { speed: 2000, navigation: { nextEl: '.m-slider1 .swiper-button-next', prevEl: '.m-slider1 .swiper-button-prev', }, pagination: { el: '.m-slider1 .swiper-pagination', }, }); </script> </body> </html> 预览[刷新] 320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏
