很是優秀的swiper插件————幻燈片播放、圖片輪播

時間 2019-11-21

標籤很是優秀 swiper 插件幻燈片播放圖片简体版

原文原文鏈接

http://www.idangero.us/javascript

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

SuperSlide2:　　（這是個PC用的滾屏插件，看着不錯，還沒研究。）　　　　2016-5-4css

http://superslide2.com/ 　　superslide2html

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

API: 　　java

http://www.idangero.us/swiper/api/ 　　官網APIjquery

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

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);//跳轉到第三個滑塊

標準輪播圖（含圖片懶加載）：github

<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>

1、幻燈片播放、圖片輪播————很是優秀的swiper插件，手機上支持手勢滑動。還能夠支持鼠標滾輪，移動和PC端兩相宜。web

（並且輪播的內容不單單能夠放一張圖片，能夠放多張，或者圖文混排。支持自定製。）有興趣的去看官方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>