jquery实现图片轮播控制,自动播放图片

 时间:2024-10-13 03:29:04

1、首先要把插件 加载到我们要运行的页面, 方法有两个可以到官方直接下载 该插件,百度jquery swiper,打开如下网站

jquery实现图片轮播控制,自动播放图片

2、找到网站的下载文件地址,如下图所示的位置,下载好解压到项目文件夹,引入即可

jquery实现图片轮播控制,自动播放图片jquery实现图片轮播控制,自动播放图片

3、当然也可以 用npm安装npm install swiper或者直接cdn引入如下所示将官方cdn复鲽判砦吟制到我们需要该插件的网页,我这里复制一下两个,如图二所示<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>记得将cdn引入的4.x.x变成你实际引入的版本

jquery实现图片轮播控制,自动播放图片jquery实现图片轮播控制,自动播放图片

4、我这里下载两个swiper 文件 ,然后新建一个swiper 文件夹 里面 新建一个 css js文件夹,如下所示结构

jquery实现图片轮播控制,自动播放图片

5、div部分我们这样修改<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src=""/></div> <div class="swiper-slide"><img src=""/></div> <div class="swiper-slide "><img src=""/></div> </div> </div><div class="swiper-pagination"></div> 底部注以img里面放入的是图片链接地址

jquery实现图片轮播控制,自动播放图片

6、js和头部部分<link rel="stylesheet" href="css/swiper.min.css"> css样式<script src="js/swiper.min.js"></script> js部分引入<script> var mySwiper = new Swiper('.swiper-container',{ pagination: '.swiper-pagination'autoplay: 1000 自动播放时间})</script>

jquery实现图片轮播控制,自动播放图片
  • DW复制粘贴怎么开启清理word段落间距
  • 2022必剪怎么调节视频的饱和度?
  • flash软件如何绘制卡通老鼠
  • flash画绘制树木的方法教程
  • 火山小视频的使用方法
  • 热门搜索
    赤水旅游 大连旅游必去景点 丹东旅游 廊坊旅游 云旅游 婺源旅游攻略 途牛旅游 宜昌旅游 旅游攻略 广州旅游