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

公告

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

http://www.idangero.us/

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

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

http://superslide2.com/ 　　superslide2

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="images/_1.jpg"></div>
        <div class="swiper-slide"><img class="swiper-lazy" data-src="images/_2.jpg"></div>
        <div class="swiper-slide"><img class="swiper-lazy" data-src="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="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="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="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="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

posted on 2014-05-19 18:41 bjhhh 阅读(16726) 评论(2) 编辑收藏举报

刷新页面返回顶部

21270

公告