非常优秀的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插件————幻灯片播放、图片轮播

相关文章