我们在做项目的过程中，有时候客户需求要求你在同一个页面中，写几个不同样式的轮播图效果，那么如何快速实现呢？(要知道若果你每个轮播图都要用原生javascript写的话，会很麻烦，代码也不够简洁)

这里我们就可以借助插件来实现这一功能，swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明：

小米防丢器

• 
• 
• 
• 
• 
• 

• 

  • 遥控自拍

  • 解放双手、释放激情

  • 解放你的双手，给你充分的空间摆Pose，天地即秀场。打开小觅App自带的相机程序，即可轻松自拍。支持绝大部分第三方能够使用音量键作为快门按钮的相机App，如美图秀秀、美颜相机、柚子相机等。

  • 实拍效果图

  • 

• 

  • 遥控音乐

  • 随心切歌

  • 享受音乐，当然要自由，音乐遥控，小觅一键掌控：打开小觅App自带的音乐播放器，即可单击暂停、双击下首，三击上首。广泛支持绝大部分音乐App，网易云音乐、QQ音乐、巨鲸等

  • Android 及 iOS版支持的音乐应用

  • 

• 

  • 遥控PPT

  • 放胆自信

  • 给你无限的空间掌控演讲，挥洒风采。能够支持Mac电脑以及Windows 8.1及以上自带蓝牙4.0的电脑

  • Mac及Windows上支持的幻灯片App

  • 

$(function () {

var swiper1 = new Swiper(‘.swiper-container-part5‘, {

pagination: ‘.swiper-part5‘,

nextButton: ‘.swiper-button-next‘,

prevButton: ‘.swiper-button-prev‘,

paginationClickable: true,

spaceBetween: 30,

centeredSlides: true,

autoplay: 4000,

autoplayDisableOnInteraction: false,

loop: true

});

$("#part5 span").css({

width: ‘1px‘,

height: ‘1px‘,

marginLeft: "45px",

display: "inline-block",

borderRadius: "10px",

backgroundColor: "white"

});

var imgs0 = new Image();

imgs0.src = "img/wallet.png";

var imgs1 = new Image();

imgs1.src = "img/pet.png";

var imgs2 = new Image();

imgs2.src = "img/key.png";

var imgs3 = new Image();

imgs3.src = "img/bag.png";

var imgs4 = new Image();

imgs4.src = "img/camera.png";

var imgs5 = new Image();

imgs5.src = "img/computer.png";

$("#part5 span ").eq(0).html(imgs0);

$("#part5 span ").eq(1).html(imgs1);

$("#part5 span ").eq(2).html(imgs2);

$("#part5 span ").eq(3).html(imgs3);

$("#part5 span ").eq(4).html(imgs4);

$("#part5 span ").eq(5).html(imgs5);

$("#part5 span img").css({

width: ‘30px‘,

height: ‘30px‘,

borderRadius: "0"

});

});

$(function () {

var swiper2 = new Swiper(‘.swiper-container-part20‘, {

pagination: ‘.swiper-part20‘,

nextButton: ‘.swiper-button-next‘,

prevButton: ‘.swiper-button-prev‘,

paginationClickable: true,

spaceBetween: 30,

centeredSlides: true,

autoplay: 4000,

autoplayDisableOnInteraction: false,

loop: true

});

$(".swiper-part20 span ").css({

width:‘80px‘,

height:‘80px‘,

marginLeft:"85px",

display:"inline-block",

borderRadius:"10px",

backgroundColor:"#F7F7F7"

});

var imgs0 = new Image();

imgs0.src="img/cameraBlue.png";

var imgs1 = new Image();

imgs1.src="img/musicBlue.png";

var imgs2 = new Image();

imgs2.src="img/pptBlue.png";

$(".swiper-part20 span ").eq(0).html(imgs0);

$(".swiper-part20 span ").eq(0).html(imgs0).append("

遥控自拍

");

$(".swiper-part20 span ").eq(1).html(imgs1);

$(".swiper-part20 span ").eq(1).html(imgs1).append("

遥控音乐

");

$(".swiper-part20 span ").eq(2).html(imgs2);

$(".swiper-part20 span ").eq(2).html(imgs2).append("

遥控ppt

");

$(".swiper-part20 span img").css({

width:‘80px‘,

height:‘70px‘,

borderRadius:"10px"

});

});

注意看代码中的红色部分，由于swiper.js中的选择器名称是统一的，如果你直接拿来用的话，一个页面只能用一次，也就是说，如果你的页面有2个以上的轮播图，那么再不改名选择器名称的前提下他们之间会互相干扰，最终导致效果出不来或者报错；

所以我在每一个原有swiper-containter类名后面又加了自己的类选择器，用以区分，然后在JS代码当中，红色字体部分也要做出相应的修改；做完这两个步骤，基本就可以在页面中实现2个不同效果的轮播图同时正常工作了；页面中另外一部分css只

是对section本身的width和height；以及其在页面中的位置做了调整；所以这里就没有给出；有兴趣的读者，可以复制上述代码试试效果；

swiper.js 源代码 下载地址：http://www.swiper.com.cn/download/index.html#file7

原文：http://www.cnblogs.com/liboyu/p/5873564.html