亲爱的，我有以下 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})
最佳答案
要使过渡成为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
关于javascript - bgSlider.js 需要激活幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18013200/