swiper滑动实现幻灯片功能及swiper animate的动画特效

最新推荐文章于 2025-05-31 20:13:02 发布

原创

最新推荐文章于 2025-05-31 20:13:02 发布 · 2.4w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#swiper滑动 #swiper上下左右滑动结合 #动画特效 #幻灯片背景音乐 #手机滑动幻灯功能

怎么实现手机滑动实现幻灯效果呢？目前网上有很多插件可以实现，本人选了一款非常不错的插件swiper.js，原因有很多，当然这款插件最符合项目的需要。所以在此推荐给大家。

那么在实现滑动幻灯效果，而且还能实现元素的动画特效，不就更酷炫了吗？动画特效可以用CSS3来自己实现，但是已经有大侠专门写了一个动画库animate.css，只需要指明类名和动画名就能轻松实现动画，只是怎么和滑动结合呢？如果你使用animate.css的话，就会发现动画是加载后一下子就全部播放了，而你想实现的肯定是滑动一页动画播放一页的效果，不用担心，swiper官网里有一个专门针对swiper的动画库swiper.animate.min.js和animate.min.css，直接下载就可以使用。

swiper官网地址：http://www.swiper.com.cn/

是否使用这个滑动插件，要根据项目需求，目前bootstraps响应式开发比较流行，其实用bootstraps也可以实现滑动的功能，这个写法可以去官网上查看。在这里就不多做解释了。

下面就来介绍swiper滑动的用法。

第一步：在官网下载相应的js，css（swiper3.06.min.css和swiper3.06.min.js）

第二步：head标签里引入

   <!--手触滑动-->
     	<link rel="stylesheet" type="text/css" href="assets/lib/css/swiper3.06.min.css">

<script src="assets/lib/js/swiper3.06.min.js"></script>

第三步：body写法

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>

    <span style="font-size:14px;">第四步：js初始化swiper</span>

var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//可选选项，自动滑动
})

好了，这么就是实现了简单的滑动效果了。是不是很简单啊... swiper还有很多属性，事件，方法等这个在官网上的帮助文档可以查看。下面就说下我在项目中用swiper实现的功能（动画，左右滑动穿插上下滑动，分页，滑动按钮，背景音乐等）

<!-- HTML5 -->  
<!DOCTYPE html>
<html>

	<head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1, m