自动播放函数Infiniteslider JS
Autoplay function Infiniteslider JS
我的无限滑块被一个棘手的JS（对我来说）卡住了。我正在尝试使用set interval函数来自动点击幻灯片，但我无法在JS中确定正确的函数。
我知道我需要用上述功能替换提醒，但不知道点击幻灯片会是什么。知道吗？
window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }
滑块JS:
function InfiniteSlider(wrapper,speed,duration,mode,easing,hover,animation){
var _infiniteSlider = this;
// If true : running
this.animated = false;
// Autorotation
this.hover = hover;
this.autorotation = animation;
this.running = true;
this.t;
// Setting the container and controller
this.wrapper = $(wrapper);
this.container = $('.slider',this.wrapper);
this.arrows = $('.slider-arrows',this.wrapper);
this.count = $('.count',this.arrows);
this.controls = $('.slider-controls',this.wrapper);
this.infos = $('.slider-infos',this.wrapper);
this.speed = speed;
this.duration = duration;
this.mode = mode; // slide - slidev - fade - demask
this.easing = easing;
this.width = this.container.width();
this.height = this.container.height();
// Setting index : slide ordered index || indexSlide : slide real index
this.index = 0;
this.indexSlide = 0;
// Number of elements
this.length = $('li', this.container).length - 1;
/* Initialize
//////////////////////////////////////////////////////////////////////// */
// Bind
if(this.hover){
$(this.wrapper).live('mouseenter', function(){
_infiniteSlider.stop(_infiniteSlider);
});
$(this.wrapper).live('mouseleave', function(){
_infiniteSlider.start(_infiniteSlider);
});
}
$('.next a',this.arrows).live('click', function(){
_infiniteSlider.next(_infiniteSlider);
return false;
});
$('.previous a',this.arrows).live('click', function(){
_infiniteSlider.previous(_infiniteSlider);
return false;
});
$('li a',this.controls).live('click', function(){
_infiniteSlider.controlsClick($(this),_infiniteSlider);
return false;
});
$(window).resize(function(){
_infiniteSlider.reset(_infiniteSlider);
});
// Identify each slide and control with initial order
$('li', this.container).each(function(){
$(this).attr('data-slide',$(this).index() + 1);
if($(this).index() == 0){
$(this).addClass('active');
$(_infiniteSlider.controls).append('<li data-slide="'+($(this).index() + 1)+'" class="active"><a href=""><span>'+$(this).index()+'</span></a></li>');
} else {
$(this).addClass('inactive');
$(_infiniteSlider.controls).append('<li data-slide="'+($(this).index() + 1)+'" class="inactive"><a href=""><span>'+$(this).index()+'</span></a></li>');
}
});
// Fill Count values
$(this.count).html((this.index + 1)+' / '+(this.length + 1));
// Fill First Infos
if($('li:eq(0)', this.container).attr('data-infos') != '') $(this.infos).html($('li:eq(0)', this.container).attr('data-infos'));
// Disable if just one slide
if(this.length == 0){
$(this.controls).hide();
this.autorotation = false;
}
// Initiate Positioning
this.reset(_infiniteSlider);
// Start Autorotation
if(this.running) this.autoRotation(_infiniteSlider);
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Autorotation
//
/////////////////////////////////////////////////////////////////////////// */
InfiniteSlider.prototype.autoRotation = function(_infiniteSlider){
clearTimeout(_infiniteSlider.t);
if($('li', _infiniteSlider.controls).length > 1 && _infiniteSlider.autorotation){
if(_infiniteSlider.running){
_infiniteSlider.t = setTimeout(function(){
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,_infiniteSlider.indexSlide + 1,_infiniteSlider)
},_infiniteSlider.duration);
}
}
}
/* ////////////////////////////////////////////////////////////////////////////
//
// External Functions
//
/////////////////////////////////////////////////////////////////////////// */
InfiniteSlider.prototype.start = function(_infiniteSlider){
_infiniteSlider.running = true;
_infiniteSlider.autoRotation(_infiniteSlider);
return false;
}
InfiniteSlider.prototype.stop = function(_infiniteSlider){
clearTimeout(_infiniteSlider.t);
_infiniteSlider.running = false;
return false;
}
InfiniteSlider.prototype.next = function(_infiniteSlider){
if(!_infiniteSlider.animated){
_infiniteSlider.autorotation = false;
clearTimeout(_infiniteSlider.t);
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,_infiniteSlider.indexSlide + 1,_infiniteSlider);
}
return false;
}
InfiniteSlider.prototype.previous = function(_infiniteSlider){
if(!_infiniteSlider.animated){
_infiniteSlider.autorotation = false;
clearTimeout(_infiniteSlider.t);
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,_infiniteSlider.indexSlide - 1,_infiniteSlider);
}
return false;
}
InfiniteSlider.prototype.controlsClick = function(object,_infiniteSlider){
if(!_infiniteSlider.animated){
_infiniteSlider.autorotation = false;
// Stop timer
clearTimeout(_infiniteSlider.t);
var clicked = $(object).parent().index();
$('li',_infiniteSlider.container).each(function(){
if($(this).attr('data-slide') == clicked + 1){
_infiniteSlider.changeSlide(_infiniteSlider.indexSlide,$(this).index(),_infiniteSlider);
}
});
}
return false;
}
InfiniteSlider.prototype.reset = function(_infiniteSlider){
_infiniteSlider.wrapper.height($(window).height());
$('.centered-v', _infiniteSlider.wrapper).css('top', ($('.slider-alt-nav', _infiniteSlider.wrapper).height()/2 - $('.centered-v', _infiniteSlider.wrapper).height()/2)+'px');
_infiniteSlider.stop(_infiniteSlider);
_infiniteSlider.width = _infiniteSlider.container.width();
_infiniteSlider.height = _infiniteSlider.container.height();
$('li',_infiniteSlider.container).width(_infiniteSlider.width);
if(_infiniteSlider.mode == 'demask'){
$('li.inactive',_infiniteSlider.container).width(0);
$('li img',_infiniteSlider.container).width(_infiniteSlider.width);
}
// Adjust Arrows
$(_infiniteSlider.arrows).css('top', ($(_infiniteSlider.container).height()/2 - $('a',_infiniteSlider.arrows).height()/2)+'px');
// Adjust Images Size
$('li img',_infiniteSlider.container).each(function(){
// Ratios
var imageRatio = 1600/935;
var wrapperRatio = _infiniteSlider.width/_infiniteSlider.height;
// Resize
if(imageRatio > wrapperRatio){
$(this)
.height(_infiniteSlider.height)
.width(_infiniteSlider.height * imageRatio)
.css('margin-left',-($(this).width()/2 - _infiniteSlider.width/2)+'px')
.css('margin-top','0');
} else {
$(this)
.width(_infiniteSlider.width)
.height(_infiniteSlider.width / imageRatio)
.css('margin-left','0')
.css('margin-top',-($(this).height()/2 - _infiniteSlider.height/2)+'px');
}
});
_infiniteSlider.start(_infiniteSlider);
return false;
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Change slide
//
/////////////////////////////////////////////////////////////////////////// */
InfiniteSlider.prototype.changeSlide = function(current,clicked,_infiniteSlider){
_infiniteSlider.animated = true;
var direction = 'next';
if(clicked < current) direction = 'previous';
// Check limits
if(clicked > _infiniteSlider.length){
clicked = 0;
} else if(clicked < 0){
clicked = _infiniteSlider.length;
}
// Redefine active slide
$('> ul > li',_infiniteSlider.container).removeClass('active').addClass('inactive');
$('> ul > li',_infiniteSlider.container).eq(clicked).removeClass('inactive').addClass('active');
_infiniteSlider.index = parseInt($('.active',_infiniteSlider.container).attr('data-slide')) - 1;
_infiniteSlider.indexSlide = $('.active',_infiniteSlider.container).index();
// Redefine active control
$('li',_infiniteSlider.controls).removeClass('active');
$('li',_infiniteSlider.controls).eq(_infiniteSlider.index).addClass('active');
// Change Count
$(_infiniteSlider.count).html($('.active',_infiniteSlider.container).attr('data-slide')+' / '+(_infiniteSlider.length + 1));
// Animate Infos
$(_infiniteSlider.infos).fadeOut(_infiniteSlider.speed/2, function(){
if(typeof $('li.active',_infiniteSlider.container).attr('data-infos') !== "undefined"){
$(_infiniteSlider.infos).html($('li.active',_infiniteSlider.container).attr('data-infos'));
$(this).fadeIn(_infiniteSlider.speed/2);
} else {
$(_infiniteSlider.infos).html('');
}
});
// Animate Slides
if(_infiniteSlider.mode == 'slide'){
// Place new slide AFTER
if(direction == 'next'){
$('li',_infiniteSlider.container).eq(clicked)
.css('left', _infiniteSlider.width+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({left: '-='+_infiniteSlider.width}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
// Place new slide BEFORE
else {
$('li',_infiniteSlider.container).eq(clicked)
.css('left', -_infiniteSlider.width+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({left: '+='+_infiniteSlider.width}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
} else if(_infiniteSlider.mode == 'slidev'){
// Place new slide AFTER
if(direction == 'next'){
$('li',_infiniteSlider.container).eq(clicked)
.css('top', _infiniteSlider.height+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({top: '-='+_infiniteSlider.height}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
// Place new slide BEFORE
else {
$('li',_infiniteSlider.container).eq(clicked)
.css('top', -_infiniteSlider.height+'px')
.show();
// Animate slides
$('li',_infiniteSlider.container).animate({top: '+='+_infiniteSlider.height}, {'duration': _infiniteSlider.speed, easing: _infiniteSlider.easing, 'complete': function(){
_infiniteSlider.animated = false;
$('li.inactive',_infiniteSlider.container).hide();
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
}});
}
} else if(_infiniteSlider.mode == 'fade'){
// Animate Slides
$('> ul > li.active',_infiniteSlider.container).fadeIn(_infiniteSlider.speed, function(){
$('> ul > li',_infiniteSlider.container).eq(current).hide();
_infiniteSlider.animated = false;
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
});
} else if(_infiniteSlider.mode == 'demask'){
$('> ul > li.active',_infiniteSlider.container).animate({width: _infiniteSlider.width}, _infiniteSlider.speed, _infiniteSlider.easing, function(){
$('> ul > li.inactive',_infiniteSlider.container).width(0);
_infiniteSlider.animated = false;
if(_infiniteSlider.running) _infiniteSlider.autoRotation(_infiniteSlider);
});
}
}
感谢您的帮助：）
Miles
我从未使用过JQuery，但作为一种猜测，为什么不尝试
function yourfunction() {_infiniteSlider.next(_infiniteSlider);
return false;}
相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;｛｛ucount｝｝”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 如何使用 node.js 比较两个 json 数组
- chrome扩展:尽管运行了at:documentidle，js脚本还是过早启动
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- Selectize.js:如何对整数值的选项进行排序
- 自动播放函数Infiniteslider JS
