您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • jquery手册
  • 当前位置:首页 > 网页特效 > 焦点图 >

    jquery图片全屏轮播插件poposlides幻灯片代码

    时间:2017-03-24 11:12 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表
    jquery图片全屏轮播插件poposlides幻灯片代码,图片全屏轮播插件poposlides是一款jQuery全屏幻灯片特效下载。

    js代码:
    (function($) {
        $.fn.poposlides = function(options) {
     
            var settings = $.extend({
                auto:true,             //自动播放
                nav:true,              //切换按钮
                playspeed:3500,         //自动播放速度
                fadespeed:500,         //淡入淡出速度
                loop:true,             //循环播放
                pagination:true,       //页码显示
    pagecenter:true,       //页码居中
                prev:".prev",          //上一页按钮
                next:".next"           //下一页按钮
                }, options);
     
            return this.each(function() {
     
                var $this = $(this),
                    slide = $this.children(),
                    index = 0;
                    len = slide.length-1,
                    slideWidth = $this.width(),
                    prev = settings.prev,
                    next = settings.next;
     
                //初始隐藏其它页,显示当前页
    if(!navigator.userAgent.match(/mobile/i)){
    slide.hide();
    slide.eq(index).show();
    }else{
    slide.css({
    "opacity":"0"
    });
    slide.eq(index).css({
    "opacity":"1"
    });
    };
     
                //显示当前页
                slideFadeIn = function(){
    if(!navigator.userAgent.match(/mobile/i)){
    slide.fadeOut(settings.fadespeed);
    slide.eq(index).fadeIn(settings.fadespeed);
    }else{
    slide.css({
    "opacity":"0",
    "-webkit-transition": settings.fadespeed/1000+"s"
    });
    slide.eq(index).css({
    "opacity":"1",
    "-webkit-transition": settings.fadespeed/1000+"s"
    });
    };
                };
     
                //翻页加,判断是否循环
                slideAdd = function() {
                if(settings.loop){
    index == len?index=0:index++;
    }else{
    index == len?index=len:index++;
    };
            slideFadeIn();
                };
     
                //翻页减,判断是否循环
                slideMinus = function() {
                if(settings.loop){
    index == 0?index=len:index--;
    }else{
    index == 0?index=0:index--;
    };
            slideFadeIn();
                };
     
                //页码
                pagnation = function(){
                var $paginationBox = $("<ul class='pagination'></ul>");
                var paginationStr ="";
    for(var i=1;i<=len+1;i++){
    paginationStr +="<li><a href='javascript:void(0)'>"+ i +"</a>";
    }
    $paginationBox.append(paginationStr);
    $this.after($paginationBox);
     
    $(".pagination li a").eq(index).addClass("active");
     
                };
     
                //当前页码
                pageActive = function(){
    $(".pagination li a").removeAttr("class")
                $(".pagination li a").eq(index).addClass("active");
    }
     
    //是否需要左右导航图标
                if(settings.nav) {
    var navStr = "<a href='javascript:void(0)' class="+ prev.substring(1) +"></a>" +
    "<a href='javascript:void(0)' class="+ next.substring(1) +"></a>";
    $this.after(navStr);
     
                    $(next).click(function(){
                    slideAdd();
                    });
     
                    $(prev).click(function(){
                    slideMinus();
                    })
    };
     
    //是否需要页码
    if(settings.pagination) {
    pagnation();
    $(prev).click(function(){ pageActive();});
    $(next).click(function(){ pageActive();});
     
                    $(".pagination li").click(function(){
                    var idx = $(this).index()-1;
                    index = idx;
                    slideAdd();
                    pageActive();
                    });
    };
     
    //页码居中
    if(settings.pagecenter){
    var pw = $(".pagination").width();
    $(".pagination").css({
    "position":"absolute",
    "left":"50%",
    "bottom":"5px",
    "margin-left":-pw/2,
    "z-index": "99"
    })
    };
     
    //是否自动播放
    if(settings.auto){
           var play = setInterval(function(){
            slideAdd();
            pageActive();
           },settings.playspeed);
           $this.nextAll().hover(function () {
               clearInterval(play);
           },
           function(){
            play = setInterval(function(){
            slideAdd();
            pageActive();
            },settings.playspeed);
           });
                };
     
            });
        };
     
    })(jQuery);
    jquery图片全屏轮播插件poposlides幻灯片代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/tx-jiaodiantu/35843.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!