Swiper.js实现移动端元素左右滑动

swiper.js也是一个很好用的移动端的js库。

需要引入它的css文件和js文件。用法很简单，加入相应的类即可，看一下Demo，很容易看懂。

我的例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Swiper demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

 <!-- Link Swiper's CSS -->
 <link rel="stylesheet" href="css/swiper.min.css" >

 <!-- Demo styles -->
 <style>
 body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
 }
 .swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px auto;
 }
 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
 }
 </style>
</head>
<body>
 <!-- Swiper -->
 <div class="swiper-container">
  <div class="swiper-wrapper">
   <div class="swiper-slide">Slide 1</div>
   <div class="swiper-slide">Slide 2</div>
   <div class="swiper-slide">Slide 3</div>
   <div class="swiper-slide">Slide 4</div>
   <div class="swiper-slide">Slide 5</div>
   <div class="swiper-slide">Slide 6</div>
   <div class="swiper-slide">Slide 7</div>
   <div class="swiper-slide">Slide 8</div>
   <div class="swiper-slide">Slide 9</div>
   <div class="swiper-slide">Slide 10</div>
  </div>
 </div>
 <div id="bless">
  <input id="bless-word" type="text"></input>
  <a id="share-button">立即分享</a>
 </div>

 <!-- Swiper JS -->
 <script src="js/swiper.min.js"></script>
 <script type="text/javascript" src="js/jquery-2.2.0.js"></script>

 <!-- Initialize Swiper -->
 <script>
 var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  paginationClickable: true,
  spaceBetween: 30,
  freeMode: true
 });
 var shareBtn = document.getElementById("share-button");
 var bless = document.getElementById("bless-word");

 shareBtn.addEventListener("click",function(){
  var blessWord = bless.value;
  var url = "index2.html?word=" + blessWord;
  shareBtn.setAttribute("href",url);
 },false);
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现移动端导航点击自动滑动效果

    js实现移动端导航点击自动滑动效果

    本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

  • js原生实现移动端手指滑动轮播图效果的示例

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0

  • JS实现移动端整屏滑动的实例代码

    基本思路: 1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了 2)手指抬起后,向对应反向操作改变当前页的位置 具体代码如下: html <div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏<

  • 原生javascript移动端滑动banner效果

    本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,

  • 浅谈移动端之js touch事件 手势滑动事件

    现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

  • 基于slideout.js实现移动端侧边栏滑动特效

    基于slideout.js实现移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢 先看下运行效果: 一.准备资料 只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 二.实现代码 HTML代码: <!doctype html> <html lang

  • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢. 以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法. HTML部分 <div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2"

  • JavaScript实现移动端滑动选择日期功能

    JavaScript实现移动端滑动选择日期功能

    本文实例为大家分享了JavaScript实现滑动选择日期的具体代码,供大家参考,具体内容如下 $(page).on('touchmove','#touchMoveTime',function (event) { touchMove(event); }); scrollBarInit(); //初始化 function scrollBarInit() { var defaultValue = 3,maxValue = 30; var myDate = new Date(); var year =

  • Swiper.js实现移动端元素左右滑动

    swiper.js也是一个很好用的移动端的js库. 需要引入它的css文件和js文件.用法很简单,加入相应的类即可,看一下Demo,很容易看懂. 我的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport

  • swiper.js插件实现pc端文本上下滑动功能示例

    本文实例讲述了swiper.js插件实现pc端文本上下滑动功能.分享给大家供大家参考,具体如下: 在网站上看小说,文本太长时,靠鼠标去拖动滚动条太麻烦,鼠标滚轮又不精确,滚一下就不知道跑到哪去了.能不能像移动端那样可以鼠标上下滑动呢?swiper可以完美解决这个问题. 1.首先当然是引入swiper文件了: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/c

  • js实现移动端轮播图滑动切换

    本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu

  • JS实现移动端上下滑动一次一屏

    JS实现移动端上下滑动一次一屏

    本文实例为大家分享了JS实现移动端上下滑动一次一屏的具体代码,供大家参考,具体内容如下 功能如下: 头部: 附近.关注.推荐选项卡的切换 左右滑动功能.头部选项卡跟随动画 上下滑动划动一屏,滑动超过头部刷新 双击选项卡回到顶部 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&

  • 移动端触屏幻灯片图片切换插件idangerous swiper.js

    移动端触屏幻灯片图片切换插件idangerous swiper.js

    强大的移动端触屏幻灯片图片和HTML内容切换插件idangerous swiper,支持自定义左右切换还是上下切换,支持多个分组切换,支持下拉更新切换,支持TAB方式切换等十几种切换效果,支持众多的选项配置,如: speed:切换的速度(毫秒) autoplay:自动播放的速度 mode:切换模式 horizontal(横向) vertical(竖向) loop:是否循环播放true false 如此强大的配置功能,值得使用. 使用方法: 1.加载插件 <link rel="stylesh

  • js实现移动端简易滑动表格

    本文实例为大家分享了js实现移动端简易滑动表格的具体代码,供大家参考,具体内容如下 上js文件代码 <template>   <view>     <scroll-view scroll-x="true" class="scroll-table">       <view class="scroll-tr">         <view class="cus-tr cus-th&qu

随机推荐