前文
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
归根到此，Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！
官方：/
官方API文档：.html
官方资源下载：.html
引入资源
<link href="dist/css/swiper.min.css" rel="stylesheet"> <!-- 注意，必须强制添加rel节点，不然不能正常使用 --> <script src="dist/js/swiper.min.js"></script>
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link href="dis/css/swiper.min.css" rel="stylesheet"> <!----><style>/* 设置轮播组件的高宽 */.swiper-container {width:1500px;height: 420px;} </style></head>
<body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/one.png"></div><div class="swiper-slide"><img src="images/two.png"></div><div class="swiper-slide"><img src="images/three.png"></div><div class="swiper-slide"><img src="images/four.png"></div><div class="swiper-slide"><img src="images/five.png"></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><!-- <div class="swiper-scrollbar"></div> --></div><script src="dis/js/swiper.min.js"></script><script src="dis/js/jquery-1.11.3.min.js"></script><script>$(function(){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',// },//自动播放
autoplay: {autoplay:true,//自动播放
delay:3000, //自动切换的时间间隔，单位ms
disableOnInteraction :false //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
},on:{autoplayStart:function(){console.log('开启自动切换');},autoplayStop:function(){console.log('关闭自动切换');}}}) })</script>
</body>
</html>
效果
转载于:.html
本文发布于:2024-02-03 03:10:24，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170690103848258.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
