轮播图以及幻灯片播放

做项目开发的时候，已经需要使用到轮播图，所以掌握一种熟练并且好用的轮播图插件是很有必要的，经过多个亲身试验，我发现这个一个非常好用的轮播图插件，可以实现各种自定义，并且还能自适应屏幕。

就是这款swiper插件，功能超级齐全，基本满足各种自定义需求，官方说明文档是：swiper说明文档

1、首先必须引用这三个外部文件

这三个文件加上demo已经上传了，点击下载

2、html代码，

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/lizi.jpg" style="height: 14rem;width: 100%;" /></div>
<div class="swiper-slide"><img src="img/miao.jpg" style="height: 14rem;width: 100%;" /></div>
</div>

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

</div>

3、进行初始化：

var mySwiper = new Swiper ('.swiper-container', { //注：swiper-container是一个div的的class名字，也可以用#swiper-container，但这是div的id名字
autoplay: 2000,
// direction: 'vertical',
loop: true,
speed:2000,

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

// // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

// // 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
})

是不是发现调用这个轮播图如此简单，如果还需要满足复杂的需求，可以点击上面那个链接进入查看官方文档说明

完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><link href="css/swiper-3.4.2.min.css" type="text/css" rel="stylesheet"/><link href="css/demo.css" type="text/css" rel="stylesheet"/><script src="http://api.map.baidu.com/api?key=&v=1.4&services=true" type="text/javascript"></script><script src="js/jquery-1.8.3.min.js"></script><script src="js/demo.js"></script><script src="js/swiper-3.4.2.jquery.min.js"></script><script src="js/swiper-3.4.2.min.js"></script></head><body><div id="map_container"></div><!--保修详情--><div class="repair_detail"><div class="titlle">报修详情</div><div class="detail">车牌编号<span id="car_liscence_number" class="car_liscence_number">123456</span>停靠车桩号<span id="parking_num" class="car_liscence_number">556321</span><p id="reqpair_reason">轮胎爆胎，车头松了</p><img src="img/lizi.jpg" id="description_img"></div></div><!--轮播图--><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/lizi.jpg" style="height: 14rem;width: 100%;" /></div><div class="swiper-slide"><img src="img/miao.jpg" style="height: 14rem;width: 100%;" /></div></div><!--如果需要分页器--> <!--<div class ="swiper-pagination"></div>--> <!-- 如果需要导航按钮 --><div class ="swiper-button-prev swiper-button-black"></div><div class ="swiper-button-next swiper-button-black"></div> <!-- 如果需要滚动条 --><!--<div class ="swiper-scrollbar"></div>--> </div></body><script>        var mySwiper = new Swiper ('.swiper-container', {autoplay: 2000,// direction: 'vertical',loop: true,speed:2000,//     // 如果需要分页器
//        pagination: '.swiper-pagination',//     // 如果需要前进后退按钮nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',//     // 如果需要滚动条
//    scrollbar: '.swiper-scrollbar',})        </script>
</html>

轮播图以及幻灯片播放相关推荐

js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
个人练习倒计时轮播图
倒计时 html <div class="time"><p>10:00场</p><img src=&q ...
轮播图详解（完整代码在最后）
01 先写出基本标签布局,这里用父级div嵌套子级ul和div标签.ul是存储图片,子级div是圆点导航的父级div.代码如下: <div class="banner"> ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...

轮播图以及幻灯片播放

轮播图以及幻灯片播放相关推荐

最新文章

热门文章