当前位置:首页 > 网页特效 > 焦点图 >

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);
本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

焦点图下载排行

最新文章