此篇博客整理了常用的轮播效果，适用于所有开发人员

swipe是当下相对而言较好用的轮播插件，下面是博主整理的demo源代码，可直接上手（备注：需自己手动swipe所需的j和css）

此段代码总共是有三个详细效果，并且备注了初始化js对应的html，和使用swipe当中所需要用到的一些小的属性控制方法！

这里就不一一详解

博客园开通很久，也一直没时间好好经营自己的博客，第一篇博客，难免细节的地方，排列顺序方法，内容介绍肯定难免存在许些问题，博主承诺以后会记录的越来越优质

希望大家多多指教

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>公用效果</title>
  <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
  <script src="js/swiper.min.js"></script>
  <style type="text/css">
  li{
  list-style: none;
  }
  /*分页器颜色样式控制*/
  .swiper-pagination-bullet{
  background-color: #8a6b78 !important;
  opacity: 1 !important;
  }
  .swiper-pagination-bullet-active{
  background-color: #e7cccc !important;
  }
  /*前后按钮控制样式*/
  .boxleft{
  background: url(img/gift-left.png) no-repeat !important;
  background-size: 100%;
  outline: none;
  }
  .boxright{
  background: url(img/gift-right.png) no-repeat !important;
  background-size: 100%;
  outline: none;
 

}

/*outline: none;属性可以去除点击出现边框*/
  /*.*/
  /*鼠标移出隐藏按钮，移入显示按钮*/
  .swiper-container .hide{
  opacity:0;
  }
  .swiper-button-next,.swiper-button-prev{
  transition:opacity .5s;
  }
  /*.*/
  /*主图下滚动*/
  #box {
  width:1200px;
  margin: 0 auto;
  }
  #box .swiper-wrapper{
  margin-top:40px ;
  padding-left: 12px;
  }
  #box ul>li {
  display: inline-block;
  height: 100%;
  box-sizing: border-box;
  }
  #box ul>li>img {
  width: 170px;
  height: 115px;
  }
  /*上下切换控制*/
  .smlbannertop{
  width: 400px;
  }
  .smlbannertop img {
  width: 400px;
  height: 305px;
  }
  .gallery-thumbs .swiper-slide {
  height: 100%;
  opacity: 0.8;
  }
  .gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  }
  .smlbannerall{
  width: 1000px;
  }
  .smlbannerall img {
  width: 176px;
  height: 120px;
  margin: 20px 0px 0 8px;
  }
  </style>
  </head>
  <body>
  <!--top banner-->
  <div class="swiper-container" id="bigbanner">
  <div class="swiper-wrapper">
  <div class="swiper-slide"><img src="img/banner01.jpg"></div>
  <div class="swiper-slide"><img src="img/banner02.jpg"></div>
  <div class="swiper-slide"><img src="img/banner03.jpg"></div>
  </div>
  <!--分页器-->
  <div class="swiper-pagination bigpagination"></div>
  <!--前进后退按钮-->
  <div class="swiper-button-prev swiper-button-black bigleft"></div>
  <div class="swiper-button-next swiper-button-black bigright"></div>
  </div>
   
   
  <!--主图下滚动-->
  <div class="swiper-container" style="width: 1300px; margin: 0 auto;">
  <div class="swiper-container" id="box">
  <ul class="swiper-wrapper">
  <li class="swiper-slide">
  <img src="img/choose1.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/choose2.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/choose3.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/choose4.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/choose5.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/choose3.jpg" />
  </li>
  </ul>
  </div>
  <div class="swiper-button-prev boxleft"></div>
  <div class="swiper-button-next boxright"></div>
  </div>
   
  <!--切换效果-->
  <div class="swiper-container gallery-top smlbannertop">
  <div class="swiper-wrapper">
  <div class="swiper-slide">
  <img src="img/comrecommend.jpg" />
  </div>
  <div class="swiper-slide">
  <img src="img/comrecommend.jpg" />
  </div>
  <div class="swiper-slide">
  <img src="img/comrecommend.jpg" />
  </div>
  <div class="swiper-slide">
  <img src="img/comrecommend.jpg" />
  </div>
  </div>
  </div>
  <div class="swiper-container gallery-thumbs smlbannerall">
  <ul class="swiper-wrapper">
  <li class="swiper-slide">
  <img src="img/comrecommend01.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/comrecommend02.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/comrecommend03.jpg" />
  </li>
  <li class="swiper-slide">
  <img src="img/comrecommend04.jpg" />
  </li>
  </ul>
  </div>
   
  <script>
  //topbanner
  var mySwiper = new Swiper('#bigbanner', {
  direction: 'horizontal',
  //是否无限轮播
  loop: true,
  //切换时间
  autoplay: {
  delay: 3000,
  disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
  },
  //过渡时间
  speed: 1300,
  // 如果需要分页器
  pagination: {
  el: '.bigpagination',
  clickable :true,
  },
  // 如果需要前进后退按钮
  navigation: {
  nextEl: '.bigright',
  prevEl: '.bigleft',
  },
  //切换效果
  effect:"fade"
  })
  //鼠标移出隐藏按钮，移入显示按钮
  mySwiper.el.onmouseover=function(){
  mySwiper.navigation.$nextEl.removeClass('hide');
  mySwiper.navigation.$prevEl.removeClass('hide');
  }
  mySwiper.el.onmouseout=function(){
  mySwiper.navigation.$nextEl.addClass('hide');
  mySwiper.navigation.$prevEl.addClass('hide');
  }
   
  //主图下滚动box
  var swiper = new Swiper('#box', {
  //显示几个盒子
  slidesPerView: 6,
  //盒子之间的间距
  spaceBetween: 0,
  autoplayDisableOnInteraction:true,
  loop: true,
  autoplay: {
  delay: 2000
  },
  speed: 800,
  // 如果需要前进后退按钮
  navigation: {
  nextEl: '.boxright',
  prevEl: '.boxleft',
  },
  });
   
  //切换效果
  var galleryThumbs = new Swiper('.smlbannerall', {
  // 控制显示几个
  slidesPerView: 4,
  loop: true,
  loopedSlides: 5, //一般设置为本来slide的个数
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
  });
  var galleryTop = new Swiper('.smlbannertop', {
  spaceBetween: 10,
  loop:true,
  loopedSlides: 5, //一般设置为本来slide的个数
  thumbs: {
  swiper: galleryThumbs,
  },
  });
  </script>
  </body>
  </html>
   

此效果图一一贴出

swipe轮播插件零基础实用的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  3. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  4. 超级详细 一听就会：利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  5. 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  6. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

  7. jQuery轮播插件SuperSlide【2016-10-14】

    [一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码  autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...

  8. 实现一个3D图片轮播插件 —— 更新版

    前言:     前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. Sparksql 取代 Hive？

    sparksql  hive https://databricks.com/blog/2014/07/01/shark-spark-sql-hive-on-spark-and-the-future-o ...

  2. 通过WindowManager图片切换的效果

    最近为这个事情焦头烂额,原因无他.原来打算是把ViewPager放在WindowManager中,再设定一个定时器,让图片自动切换,但是搞了很久,发现无论如何,这个图片只显示一张.虽然日志看得出来图片 ...

  3. Linux就该这么学--命令集合2（系统状态检测命令）

    1.查看本机当前的网卡配置与网络状态等信息:(ifconfig [网络设备] [参数]) ifconfig 2.查看系统的内核名称.内核发行版.内核版本.节点名.硬件名称.硬件平台.处理器类型.操作系 ...

  4. [数据挖掘课程笔记]Naïve Bayesian Classifier

    朴素贝叶斯模型 1) X:一条未被标记的数据 2) H:一个假设,如H=X属于Ci类 根据贝叶斯公式 把X表示为(x1,x2,....xn) x1,x2,....xn表示X在各个特征上的值. 假设有c ...

  5. 04-树4 是否同一棵二叉搜索树（25 point(s)） 【Tree】

    04-树4 是否同一棵二叉搜索树(25 point(s)) 给定一个插入序列就可以唯一确定一棵二叉搜索树.然而,一棵给定的二叉搜索树却可以由多种不同的插入序列得到.例如分别按照序列{2, 1, 3}和 ...

  6. [NOIP2011提高组day2]-3-观光公交

    3．观光公交 (bus.cpp/c/pas) [问题描述] 风景迷人的小城 Y 市,拥有 n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光 ...

  7. HDU5965 扫雷 —— dp递推

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5965 题解: 1. 用a[]数组记录第二行的数字,用dp[]记录没一列放的地雷数.如果第一列的地雷数d ...

  8. zabbix 中 宏 的介绍

    宏的作用是便于在模板.items.trigger中的引用.宏的名称为 {$名称},宏的字符范围为 A~Z.0~9._ . 例如: 在key中的宏: net.tcp.service[ssh,{$SSH_ ...

  9. iOS7默认状态栏文字颜色为黑色，项目需要修改为白色。

    1在Info.plist中设置UIViewControllerBasedStatusBarAppearance 为NO2 在需要改变状态栏颜色的 AppDelegate中在 didFinishLaun ...

  10. uglifyjs2全局混淆

    从git克隆uglifyjs2源码后,进入目录: npm link 编译并安装uglifyjs2成功,就可以直接调用uglifyjs命令了.但是在进行全局混淆时出现了问题,虽然指定了文件topvar. ...