目前我使用simplefadeslideshow(http://www.simplefadeslideshow.com/)来做一些淡入淡出效果。
我想要做的是,在网页上悬停某些元素时,是将幻灯片更改为某个图片。
我尝试了以下内容:
var slider_1 = jQuery('#slide_show_1').fadeSlideShow({
width: 285,
height: 489,
PlayPauseElement: false,
NextElement: false,
PrevElement: false,
ListElement: false,
});
初始化滑块,并按预期工作。然后我打电话给:
slider_1.jumpTo(2);
在悬停事件中(在第3张幻灯片中淡入淡出),返回
未捕获TypeError:对象[object Object]没有方法'jumpTo'
脚本确实有一个jumpTo()函数,所以我称之为错误?任何帮助表示赞赏!
我尝试调用该方法的原始脚本如果有帮助:
jQuery.fn.fadeSlideShow = function(options) {
return this.each(function(){
settings = jQuery.extend({
width: 640, // default width of the slideshow
height: 480, // default height of the slideshow
speed: 'slow', // default animation transition speed
interval: 3000, // default interval between image change
PlayPauseElement: 'fssPlayPause', // default css id for the play / pause element
PlayText: 'Play', // default play text
PauseText: 'Pause', // default pause text
NextElement: 'fssNext', // default id for next button
NextElementText: 'Next >', // default text for next button
PrevElement: 'fssPrev', // default id for prev button
PrevElementText: '< Prev', // default text for prev button
ListElement: 'fssList', // default id for image / content controll list
ListLi: 'fssLi', // default class for li's in the image / content controll
ListLiActive: 'fssActive', // default class for active state in the controll list
addListToId: false, // add the controll list to special id in your code - default false
allowKeyboardCtrl: true, // allow keyboard controlls left / right / space
autoplay: true // autoplay the slideshow
}, options);
// set style for wrapper element
jQuery(this).css({
width: settings.width,
height: settings.height,
position: 'relative',
overflow: 'hidden'
});
// set styles for child element
jQuery('> *',this).css({
position: 'absolute',
width: settings.width,
height: settings.height
});
// count number of slides
var Slides = jQuery('> *', this).length;
Slides = Slides - 1;
var ActSlide = Slides;
// Set jQuery Slide short var
var jQslide = jQuery('> *', this);
// save this
var fssThis = this;
var intval = false;
var autoplay = function(){
intval = setInterval(function(){
jQslide.eq(ActSlide).fadeOut(settings.speed);
// if list is on change the active class
if(settings.ListElement){
var setActLi = (Slides - ActSlide) + 1;
if(setActLi > Slides){setActLi=0;}
jQuery('#'+settings.ListElement+' li').removeClass(settings.ListLiActive);
jQuery('#'+settings.ListElement+' li').eq(setActLi).addClass(settings.ListLiActive);
}
if(ActSlide <= 0){
jQslide.fadeIn(settings.speed);
ActSlide = Slides;
}else{
ActSlide = ActSlide - 1;
}
}, settings.interval);
if(settings.PlayPauseElement){
jQuery('#'+settings.PlayPauseElement).html(settings.PauseText);
}
}
var stopAutoplay = function(){
clearInterval(intval);
intval = false;
if(settings.PlayPauseElement){
jQuery('#'+settings.PlayPauseElement).html(settings.PlayText);
}
}
var jumpTo = function(newIndex){
if(newIndex < 0){newIndex = Slides;}
else if(newIndex > Slides){newIndex = 0;}
if( newIndex >= ActSlide ){
jQuery('> *:lt('+(newIndex+1)+')', fssThis).fadeIn(settings.speed);
}else if(newIndex <= ActSlide){
jQuery('> *:gt('+newIndex+')', fssThis).fadeOut(settings.speed);
}
// set the active slide
ActSlide = newIndex;
if(settings.ListElement){
// set active
jQuery('#'+settings.ListElement+' li').removeClass(settings.ListLiActive);
jQuery('#'+settings.ListElement+' li').eq((Slides-newIndex)).addClass(settings.ListLiActive);
}
}
// if list is on render it
if(settings.ListElement){
var i=0;
var li = '';
while(i<=Slides){
if(i==0){
li = li+'<li class="'+settings.ListLi+i+' '+settings.ListLiActive+'"><a href="#">'+(i+1)+'<\/a><\/li>';
}else{
li = li+'<li class="'+settings.ListLi+i+'"><a href="#">'+(i+1)+'<\/a><\/li>';
}
i++;
}
var List = '<ul id="'+settings.ListElement+'">'+li+'<\/ul>';
// add list to a special id or append after the slideshow
if(settings.addListToId){
jQuery('#'+settings.addListToId).append(List);
}else{
jQuery(this).after(List);
}
jQuery('#'+settings.ListElement+' a').bind('click', function(){
var index = jQuery('#'+settings.ListElement+' a').index(this);
stopAutoplay();
var ReverseIndex = Slides-index;
jumpTo(ReverseIndex);
return false;
});
}
if(settings.PlayPauseElement){
if(!jQuery('#'+settings.PlayPauseElement).css('display')){
jQuery(this).after('<a href="#" id="'+settings.PlayPauseElement+'"><\/a>');
}
if(settings.autoplay){
jQuery('#'+settings.PlayPauseElement).html(settings.PauseText);
}else{
jQuery('#'+settings.PlayPauseElement).html(settings.PlayText);
}
jQuery('#'+settings.PlayPauseElement).bind('click', function(){
if(intval){
stopAutoplay();
}else{
autoplay();
}
return false;
});
}
if(settings.NextElement){
if(!jQuery('#'+settings.NextElement).css('display')){
jQuery(this).after('<a href="#" id="'+settings.NextElement+'">'+settings.NextElementText+'<\/a>');
}
jQuery('#'+settings.NextElement).bind('click', function(){
nextSlide = ActSlide-1;
stopAutoplay();
jumpTo(nextSlide);
return false;
});
}
if(settings.PrevElement){
if(!jQuery('#'+settings.PrevElement).css('display')){
jQuery(this).after('<a href="#" id="'+settings.PrevElement+'">'+settings.PrevElementText+'<\/a>');
}
jQuery('#'+settings.PrevElement).bind('click', function(){
prevSlide = ActSlide+1;
stopAutoplay();
jumpTo(prevSlide);
return false;
});
}
if(settings.allowKeyboardCtrl){
jQuery(document).bind('keydown', function(e){
if(e.which==39){
var nextSlide = ActSlide-1;
stopAutoplay();
jumpTo(nextSlide);
}else if(e.which==37){
var prevSlide = ActSlide+1;
stopAutoplay();
jumpTo(prevSlide);
}else if(e.which==32){
if(intval){stopAutoplay();}
else{autoplay();}
//return false;
}
});
}
// start autoplay or set it to false
if(settings.autoplay){autoplay();}else{intval=false;}
});
};