非常优秀的swiper插件————幻灯片播放、图片轮播

http://www.idangero.us/

http://www.swiper.com.cn/　　Swiper中文网　　2015-10-15

SuperSlide2:　　（这是个PC用的滚屏插件，看着不错，还没研究。）　　　　2016-5-4

http://www.superslide2.com/param.html　　api

API: 　　

http://www.idangero.us/swiper/api/ 　　官网API

http://www.swiper.com.cn/api/index.html

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

    onSlideChangeEnd: function(){//当滑块滚动完毕后调用

        console.log(mySwiper.activeIndex);//当前滑块索引号

    },

    onSlideChangeStart: function(){//当滑块滚动开始调用

        console.log(mySwiper.activeIndex);//当前滑块索引号

    },

});

//mySwiper.onResize();//刷新swiper（不刷新会导致slide无法拖动的bug）

//mySwiper.slideTo(_index);//跳转到第几张图

//mySwiper.slideTo(_index,0);//跳转到第几张图（直接跳转，无滑动效果）

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

    //pagination: '.pagination',

    //loop:false,

    grabCursor: true,

    //paginationClickable: true,

    mousewheelControl:true,//鼠标滚轮

    //autoplay:2000,

    //mode: 'vertical',//纵向滚动（这个好像不好使了 2016-1-15）

    //direction: 'vertical',//纵向滚动（这个好用 2016-1-15）

    onInit: function(mySwiper){//Swiper初始化了

        //console.log("提示Swiper的当前索引 "+mySwiper.activeIndex);//提示Swiper的当前索引

    },

});

mySwiper.slideTo(2);//跳转到第三个滑块

标准轮播图（含图片懒加载）：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<link href="http://cdn.bootcss.com/Swiper/3.1.7/css/swiper.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/Swiper/3.1.7/js/swiper.min.js"></script>

<script type="text/javascript">

$(function(){

    //轮播图

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

        pagination: '.xgt-pagination',    //导航小圆点

        paginationClickable: true,        //导航小圆点（可点击）

        nextButton: '.swiper-button-next',//下一张按钮

        prevButton: '.swiper-button-prev',//上一张按钮

        //direction: 'vertical',//Slides的滑动方向:垂直

        //autoplay : 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换

        //speed:300,//滑动速度，即slider自动滑动开始到结束的时间（单位ms）

        loop: true,        //可循环

        grabCursor: true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）

        mousewheelControl:true,//鼠标滚轮

        lazyLoading:true,//图片懒加载    http://www.swiper.com.cn/api/Images/2015/0308/213.html

        onLazyImageLoad: function(swiper, slide, image){

            //alert('延迟加载图片');

            //console.log(swiper);//Swiper实例

            //console.log(slide);//哪个slide里面的图片在加载

            //console.log(image);//哪个图片在加载

        }

    });

});

</script>

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide"><img class="swiper-lazy" data-src="data:images/_1.jpg"></div>

        <div class="swiper-slide"><img class="swiper-lazy" data-src="data:images/_2.jpg"></div>

        <div class="swiper-slide"><img class="swiper-lazy" data-src="data:images/_3.jpg"></div>

    </div>

</div>

一、幻灯片播放、图片轮播————非常优秀的swiper插件，手机上支持手势滑动。还可以支持鼠标滚轮，移动和PC端两相宜。

（而且轮播的内容不仅仅可以放一张图片，可以放多张，或者图文混排。支持自定制。）有兴趣的去看官方demo

http://www.swiper.com.cn/api/　　API

初始化参数：

mousewheelControl:true,　　　//支持鼠标滚轮

mode: 'vertical',　　　　　　　//上下方向滚动

autoplay:2000,　　　　　　　　//2秒播放一张

pagination: '.pagination',　　　//导航（指定导航的类）

paginationClickable: true,　　 //导航（小圆点）可点击

loop:true,　　　　　　　　　　 //可循环（最后一张可衔接第一张）

grabCursor: true,　　　　　　 //滑块上加鼠标变小手的效果

lazyLoading:true,　　　　　　 //图片懒加载

freeMode: true,　　　　　　　//自由模式（设定此值后，每次可滚动在中间位置，不会每次只滚动一张图）

slidesPerView:4,　　　　　　　//一屏内显示4个滑块

preloadImages:false,　　　　 //强制预加载所有图片

翻页小圆点：

<div class="swiper-container tagjvhe-swiper">

<div class="swiper-wrapper cDGray f14">

    <div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag1.jpg" alt="效果图片"></a><p>现代1居室内装饰设计效果图片<span class="r"><i class="iconfont icon27"></i><em>1/8</em></span></p></div>

    <div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag2.jpg" alt="效果图片"></a><p>现代2居室内装饰设计效果图片<span class="r"><i class="iconfont icon27"></i><em>2/8</em></span></p></div>

    <div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag3.jpg" alt="效果图片"></a><p>现代3居室内装饰设计效果图片<span class="r"><i class="iconfont icon27"></i><em>3/8</em></span></p></div>

    <div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag4.jpg" alt="效果图片"></a><p>唐朝<span class="r"><i class="iconfont icon27"></i><em>4/8</em></span></p></div>

</div>

</div>

<div class="tagjvhe-pagination"></div>

<style>

/*翻页小圆点*/

.tagjvhe-pagination {height:4px;}

.swiper-pagination-bullet {}

.swiper-pagination-bullet-active {background:#ff7200;}

</style>

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

    //pagination: '.pagination',

    //loop:true,

    grabCursor: true,

    paginationClickable: true,

    mousewheelControl:true,//鼠标滚轮

    autoplay:2000,

    mode: 'vertical',/*纵向滚动*/

})

$('.arrow-left').on('click', function(e){/*向前*/

    e.preventDefault();

    mySwiper.slidePrev();

})

$('.arrow-right').on('click', function(e){/*向后*/

    e.preventDefault();

    mySwiper.slideNext();

})

http://www.idangero.us/sliders/swiper/index.php   插件主页

http://www.idangero.us/sliders/swiper/api.php   插件API （强大的API。 可用 http://fanyi.baidu.com 输入网址翻译）

http://www.idangero.us/sliders/swiper/demos.php   插件DEMO

https://github.com/nolimits4web/Swiper/tree/master/src　　下载

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

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

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="format-detection" content="telephone=no" />

<!-- jquery库 -->

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- <script src="js/zepto.min.js"></script> -->

<!-- 图片轮播 -->

<!-- <link href="plugin/idangerous.swiper.css" rel="stylesheet" type="text/css" />

<script src="plugin/idangerous.swiper-2.0.min.js"></script> -->

<link href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css" rel="stylesheet" type="text/css" />

<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>

</head>

<body>

<style type="text/css">

.main{margin:0 auto;}

</style>

        <!-- 首页头条新闻(4张) -->

        <!-- 图片轮播 -->

        <div class="main" style="position:relative;">

            <div class="swiper-container" id="swiper-container">

                <div class="swiper-wrapper">

                    <div class="swiper-slide"><a href="news_detail.html?id=51"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示一</a></div></div>

                    <div class="swiper-slide"><a href="news_detail.html?id=50"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示222222222222</a></div></div>

                    <div class="swiper-slide"><a href="news_detail.html?id=49"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示3333333333333</a></div></div>

                    <div class="swiper-slide"><a href="news_detail.html?id=48"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示4444444444444</a></div></div>

                </div>

                 <div class="my-pager"></div>

            </div>

        </div>

        <style>

        .swiper-wrapper{overflow:auto;zoom:1;}

        .swiper-slide{position:relative;}

        #swiper-container{width:680px;height:350px;}/*定义宽高*/

        #swiper-container img{width:100%;}

        #swiper-container a{color:#fff;text-decoration:none;}

        #swiper-container .title{position:absolute;bottom:0;width:100%;height:30px;line-height:30px;color:#FFF;font-size:20px;z-index:2;}

        #swiper-container .title-bg{position:absolute;bottom:0;width:100%;height:30px;background:#000;opacity:0.6;filter:alpha(opacity=60);z-index:1;}

        /*翻页小圆点*/

        .my-pager {position: absolute;right:2%;text-align: right;bottom:0;height:30px;line-height:30px;z-index:100;}

        .swiper-pagination-switch {display: inline-block;width: 8px;height: 8px;border-radius: 8px;background: #999;-webkit-box-shadow: 0px 1px 2px #555 inset;box-shadow: 0px 1px 2px #555 inset;margin: 0 3px;cursor: pointer;}

        .swiper-active-switch {background: #fff;}

        </style>

        <script>

        $(function(){

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

                    pagination: '.my-pager',

                    autoplay:3000,

                    loop:true,

                    grabCursor: true,

                    paginationClickable: true

                })

                //var containerH=$("#swiper-container").find("img").first().height();

                //$("#swiper-container").height(containerH);

        });

        </script>

        <!-- 图片轮播,end -->

</body>

</html>

二、jQuery 3D圆盘旋转焦点图支持鼠标滚轮

http://www.html5tricks.com/jquery-3d-circle-image-slider.html 　　2014-10-9

三、jQuery水平滑动焦点图插件（这个不支持触屏拖动事件）

http://www.html5tricks.com/jquery-hor-image-slider.html 　　2014-10-10

superslide 这个还没试用 2015-4-1

非常优秀的swiper插件————幻灯片播放、图片轮播的更多相关文章

jq插件处女座图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说上代码 (function($) { $.fn ...
jQuery插件slider实现图片轮播
1:引入相应的js文件 jquery.SuperSilder.js 2:HTML: 结构注:此地加载图片的代码也可以从后台库中读取图片的集合列表,然后通过循环的方式显示出来 3:CSS 样式定义左 ...
Javascript和jQuery WordPress 图片轮播插件，内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
js实现幻灯片播放图片示例代码
幻灯片播放图片的效果想必大家都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下复制代码代码如下: <select id="img_date" style=" ...
12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
图片轮播插件Nivo Slider
推荐:图片轮播插件Nivo Slider 因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

随机推荐

ui学习心得
软工课上我分配的任务是界面设计,但是对于初期一个ps从没接触的人来说我觉得还是有点困难,所以要从头学起. PS的功能是什么呢?对于业余爱好者来说,主要还是做一些简单的处理照片.绘图.设计一些皮肤等, ...
jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
django 分页出现 UnorderedObjectListWarning 错误
django 分页出现此错误: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unorde ...
C#获取文件类型
Form1.cs using System;using System.Collections.Generic;using System.ComponentModel;using System.Data ...
cin与cout格式化输出
cin 中“<<”流输入运算符 ----------------------------------------------------------------------------- ...
著名的Log4j是怎么来的?
Java在设计之初,借鉴了很多其他语言不错的特性和优点,唯独没有设计日志系统,但是日志的重要性不言而喻,一旦程序运行起来,运行结果与预期不一致,基本就是出Bug了,这个时候需要进行Bug排查,一般有两 ...
linux下编译自己的库文件实践
有了我传的那个资料,这个就没什么用了,那个太经典了,这个就是记录我自己的实践.:-) linux下文件的类型是不依赖于其后缀名的,但一般来讲:.o,是目标文件,相当于windows中的.obj文件.s ...
git 在某个分支下创建新分支
首先要强调一个观念,那就是在某个分支A下创建新的分支B,是指使用A分支下的代码,并不是A/B这样的层级结构. 比如,我想要在非主分支dev 下面创建子分支dev_dev >>>1.创 ...
cstdlib和stdlib.h区别
一.区别 #include<stdlib.h> :.h是C的习惯 #include<cstdlib> : c开头是C++的习惯二.stdlib.h是C语言库头文件之一,包含了 ...
#考研笔记#计算机之word问题
Word 问题:1. 如何为文档加密保存?单击 office 按钮\另存为\工具按钮\常规选项\设置打开文件时的密码 2．怎样在横格稿纸中录入古诗?单击 office 按钮\新建\模板\信纸\稿纸( ...

非常优秀的swiper插件————幻灯片播放、图片轮播

非常优秀的swiper插件————幻灯片播放、图片轮播的更多相关文章

随机推荐

热门专题