swiper插件的简单使用，实现图片轮播

时间 2019-11-18

标签 swiper 插件简单使用实现图片繁體版

原文原文链接

移动端和p c端常常会遇到写轮播图的状况，这里只是简单的说一下swiper插件的简单用法（移动端为例）。css

<!DOCTYPE html>html

<html lang="en">jquery

<head>app

<meta charset="UTF-8">ide

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">oop

<title>Title</title>插件

<link rel="stylesheet" href="css/swiper-3.4.2.min.css">scala

<script>htm

document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px";图片

</script>

</head>

<body>

　　<div class="detail_pic">

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>

<div class="swiper-slide"><img src="img/2.png" alt=""></div>

<div class="swiper-slide"><img src="img/3.png" alt=""></div>

<div class="swiper-slide"><img src="img/4.png" alt=""></div>

<div class="swiper-slide"><img src="img/5.png" alt=""></div>

<div class="swiper-slide"><img src="img/6.png" alt=""></div>

<div class="swiper-slide"><img src="img/7.png" alt=""></div>

</div>

</div>

</div>

<script src="js/zepto.js"></script>

<script src="js/swiper-3.4.2.jquery.min.js"></script>

<script>

//轮播图

$(document).ready(function () {

var mySwiper = new Swiper ('.swiper-container', {

direction: 'horizontal', //轮播方向

autoplay:2000, //自动轮播

loop: true, //循环

autoplayDisableOnInteraction : false //用户操做后不中止

});

});

</script>

</body>

</html>

这样一个简单的轮播就实现啦，记得将图片地址换掉哦，原生的轮播，有时间能够写起来。。

相关文章

相关标签/搜索

图片轮播图控件

不使用插件

popupMenu的简单使用

RXJava的简单实现

最简单的实现

轮播图特效

红包项目实战

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<