javascript - bgSlider.js 需要激活幻灯片

Question

亲爱的，我有以下 BgSlider.js 脚本，我一直在努力使背景图像自动旋转，而不是单击分页从一个图像移动到另一图像。尝试更改一些选项，例如幻灯片= true，并尝试更改持续时间速度。这是我正在使用的代码:

$.extend(_fw.meth,{
bgSlider:{
        slideshow:false,
        duration:1500,
        easing:'',
        preload:false,
        pagination:true,
        pagActiveCl:'current',
        pagEv:'click',
        pagArea:'a',
        current:0,
        currN:0,
        method:'fit',
        altCSS:{},
        padding:0,
        preload:false,
        spinner:false,
        minSpinnerWait:150,
        preloadFu:function(){
            var opt=this,
                img=$('<img>')
                        .css({position:'absolute',left:'-999%'})
                        .appendTo('body'),
                num=opt.images.length
            ;(function(){
                if(num)
                    img .load(arguments.callee)
                        .attr({src:opt.images[--num]})
                else
                    img.remove()                    
            })()
        },
        pagsFu:function(){
            var opt=this,
                pags=opt.pags=$(opt.pagination+' li')
            if(!opt.images)
                opt.images=[],
                pags.each(function(i){
                    opt.images.push($('a',this).attr('href'))
                })
            pags.find(opt.pagArea).each(function(i){
                $(this).data({num:i})
            })
            pags.parent()
                .delegate(opt.pagination+':not(.'+opt.pagActiveCl+')'+(opt.pagArea?' '+opt.pagArea:''),opt.pagEv,function(){
                    var th=$(this)
                    opt.changeFu(th.data('num'))
                    opt.pags.not(th.parent().addClass(opt.pagActiveCl)).removeClass(opt.pagActiveCl)    ;
                    Cufon.replace('.pagination li', { fontFamily: 'Ubuntu', hover:true });
                    return false
                })
        },
        preFu:function(){
            var opt=this
            opt.img
                .css({
                    position:'absolute',
                    left:0,
                    top:0
                    })
                .css(opt.altCSS)
                .attr({src:opt.images[opt.current]})                    
            opt.img.each(function(){
                var _f=function(){
                            opt.resizeFu()
                            opt.img.data({width:opt.img.width(),height:opt.img.height()})                       
                        }
                if(this.complete)
                    _f()
                else
                    $(this)
                        .load(_f)
            })

            opt.holder
                .css({
                    position:'fixed',
                    left:0,
                    right:0,
                    top:0,
                    bottom:0,
                    zIndex:-1
                    })
                .append(opt.img)
            if(opt.spinner)
                opt.spinner.hide()
        },
        resizeFu:function(){
            var opt=this,
                img=opt.img,
                w=opt.wi,
                h=opt.he,
                l=img.css('left'),
                t=img.css('top'),
                bw=document.body.offsetWidth-opt.padding,
                bh=document.body.offsetHeight,
                k=w/h

        },
        changeFu:function(n){
            var opt=this
            if(n==opt.currN)
                return false
            opt.currN=n
            opt.showFu(opt.images[n])
        },
        nextFu:function(){
            var opt=this,
                n=opt.currN
            opt.changeFu(++n<opt.images.length?n:n=0)
            opt.pags.eq(n).addClass(opt.pagActiveCl).siblings().removeClass(opt.pagActiveCl)
        },
        prevFu:function(){
            var opt=this,
                n=opt.currN
            opt.changeFu(--n>=0?n:n=opt.images.length-1)
            opt.pags.eq(n).addClass(opt.pagActiveCl).siblings().removeClass(opt.pagActiveCl);
            Cufon.replace('.pagination li', { fontFamily: 'Ubuntu', hover:true });
        },
        showFu:function(src){
            var opt=this,
                clone=opt.clone=opt.img.clone(true)
            if(opt.slideshow)
                clearInterval(_timer[0])
            clone
                .css({
                     opacity:0,
                     left:0,
                     top:0
                     })
                .appendTo(opt.holder)   
                .width(opt.img.width())
                .load(function(){
                    var th=$(this)
                    opt.holder.find('>*').stop()                        
                    setTimeout(function(){
                        opt.spinner.hide()
                        opt.wi=th.width()
                        opt.he=th.height()
                        clone
                            .stop()
                            .animate({
                                    opacity:1
                                    },{
                                    duration:opt.duration,
                                    easing:opt.easing,
                                    complete:function(){
                                        var tmp=opt.holder.find('img')
                                        opt.img=$(this)
                                        tmp.not(tmp.last()).remove()
                                        opt.resizeFu()
                                    }
                                    })
                    },opt.minSpinnerWait)
                })
                .attr({src:src})
                opt.spinner.show()
                if(opt.slideshow)
                    _timer[0]=setInterval(function(){
                        opt.nextFu()
                    },opt.slideshow)
        },
        init:function(opt){
            var holder=opt.holder=this,
                img=opt.img=$('<img>')
            if(opt.pagination)
                opt.pagsFu()
            if(opt.spinner)
                opt.spinner=$(opt.spinner)
            opt.preFu()
            if(opt.preload)
                opt.preloadFu()
            window.onresize=function(){
                opt.resizeFu()
            }
            if(opt.slideshow)
                _timer[0]=setInterval(function(){
                    opt.nextFu()
                },opt.slideshow)
            holder.data({opt:opt})

Answer 1

要使过渡成为Billboard图像，必须修改几行代码:

1 - 声明幻灯片

$ ('# bgSlider'). bgSlider ({
/ / Other settings
slideshow: true,
interval: 24000,
/ / Other settings

2 - 修改bgSlider.js

搜索此代码

if (opt.slideshow)
_timer [0] = setInterval (function () {
opt.nextFu ()
} opt.slideshowl)

并将其替换为:

if (opt.slideshow)
_timer [0] = setInterval (function () {
opt.nextFu ()
}, opt.interval) / / variable change opt.slideshow