我有一个Joomla模块，它以幻灯片形式显示产品，我想将其设置为自动播放。我问这个模块的开发人员并说我不可能，但我不相信他们！ 所以我现在会给你创建幻灯片的两个JS文件，如果有人知道的话，请帮助我！
File1中
(function($) {
var SmartSlider = function(element, options){
//Defaults are below
var settings = $.extend({}, $.fn.smartSlider.defaults, options);
//Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: true
};
//Get this slider
var slider = $(element);
slider.data('smart:vars', vars);
slider.css('position','relative');
slider.addClass('smartSlider');
// var info_products = slider.find('.product_detail');
//Max time for each slide
var max_time_out = Math.max(settings.boxCols * settings.boxRows*20,settings.boxCols * 2*100,settings.slices*50);
//Find our slider children
var kids = slider.find('.background_image').children();
kids.each(function() {
var child = $(this);
//Get img width & height
// var childWidth = child.width();
// if(childWidth == 0) childWidth = child.attr('width');
// if(childWidth == 0 || childWidth==undefined) childWidth = child.find("img").width();
// var childHeight = child.height();
// if(childHeight == 0) childHeight = child.attr('height');
// if(childHeight == 0 || childHeight==undefined) childHeight = child.find("img").height();
childWidth = settings.image_width;
childHeight = settings.image_height;
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('smart-imageLink');
link = child;
}
child = child.find('img:first');
}
//Resize the slider
if(childWidth > slider.width()){
slider.width(childWidth);
}
if(childHeight > slider.height()){
slider.height(childHeight);
}
if(link != ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
if (settings.align_image=="right" && slider.width()>slider.parent().width()){
slider.css("right",slider.width()-slider.parent().width());
}
var slider_width = slider.width();
var slider_height = slider.height();
// //If randomStart
// if(settings.randomStart){
// settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
// }
// //Set startSlide
// if(settings.startSlide > 0){
// if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
// vars.currentSlide = settings.startSlide;
// }
//Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
//Set first background
if (settings.align_image=="left"){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}else{
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
}
// //In the words of Super Mario "let's a go!"
var timer = 0;
// if(!settings.manualAdvance && kids.length > 1){
// timer = setInterval(function(){ smartRun(slider, kids, settings, false); }, settings.pauseTime);
// }
//Previous and Next button
$('.navigation_button div.left_button', slider.parent()).bind('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(vars.currentSlide+1).css("display","block"));
smartRun(slider, kids, settings, 'prev');
});
$('.navigation_button div.right_button', slider.parent()).bind('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(vars.currentSlide+1).css("display","block"));
smartRun(slider, kids, settings, 'next');
});
//Change item selected
// //Set initial active link
// $('.navigation_sspro a:eq('+ vars.currentSlide +')', slider).addClass('active');
$('.navigation_sspro div', slider.parent()).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// setTimeout(wait_me,100);
// // slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
vars.currentSlide = $(this).attr("class");
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(parseInt($(this).attr("class"))+1).css("display","block"));
smartRun(slider, kids, settings, 'control');
});
//Change item selected with style bullet
slider.parent().find('div.bullet_button').each(function(index){
$(this).bind("click",function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
vars.currentSlide = index-1;
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(index).css("display","block"));
smartRun(slider, kids, settings, 'control');
});
});
//Resize height of info product
$('.info_product', slider.parent()).css("height",slider_height);
//Change background of slider
function change_background(){
if (options.align_image=="left"){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}else{
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
}
}
//Event when Animation finishes
slider.bind('smart:animFinished', function(){
change_background();
vars.running = false;
slide_running = false;
//Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
//Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// //Restart the timer
// if(timer == '' && !vars.paused && !settings.manualAdvance){
// timer = setInterval(function(){ smartRun(slider, kids, settings, false); }, settings.pauseTime);
// }
//Trigger the afterChange callback
settings.afterChange.call(this);
});
function start_point(){
slide_running = true;
}
// Add slices for slice animations
var createSlices = function(slider, settings, vars){
if (settings.align_image=="left"){
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position:'relative',
top:0,
left:0,
height: slider_height
}).appendTo(slider);
}else{
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position:'absolute',
top:0,
right: 0,
height: slider_height,
// width: vars.currentImage.attr("width")
// width: slider_width
width: vars.currentImage.width()
}).appendTo(slider);
}
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider_width/settings.slices);
if(i == settings.slices - 1){
divWrapper.append(
$('<div class="smart-slice"></div>').css({
left:(sliceWidth*i)+'px',
width:(slider_width-(sliceWidth*i))+'px',
height:'0px',
opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
})
);
} else {
divWrapper.append(
$('<div class="smart-slice"></div>').css({
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:'0px',
opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
})
);
}
}
}
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if (settings.align_image=="left"){
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position:'relative',
top:0,
left:0
}).appendTo(slider);
}else{
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position: 'absolute',
top: 0,
right: 0,
height: slider_height,
// width: vars.currentImage.attr("width")
//boi vi che do none nen phai de che do tren
// width: slider_width
width: vars.currentImage.width()
}).appendTo(slider);
}
var boxWidth = Math.round(slider_width/settings.boxCols);
var boxHeight = Math.round(slider_height/settings.boxRows);
for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols == settings.boxCols-1){
divWrapper.append(
$('<div class="smart-box"></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider_width-(boxWidth*cols))+'px',
height:boxHeight+'px',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
})
);
} else {
divWrapper.append(
$('<div class="smart-box"></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px',
height:boxHeight+'px',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
})
);
}
}
}
}
// Private run method
var smartRun = function(slider, kids, settings, nudge){
//Get our vars
var vars = slider.data('smart:vars');
// //Trigger the lastSlide callback
// if(vars && (vars.currentSlide == vars.totalSlides - 1)){
// settings.lastSlide.call(this);
// }
// Stop
if((!vars || vars.stop) && !nudge) return false;
//Trigger the beforeChange callback
// settings.beforeChange.call(this);
//Set current background before change
if(!nudge){
alert('co bao jo em biet');
if (settings.align_image=="left"){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}else{
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
}
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
} else {
if(nudge == 'prev'){
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
if(nudge == 'next'){
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
}
vars.currentSlide++;
//Trigger the slideshowEnd callback
if(vars.currentSlide == vars.totalSlides){
vars.currentSlide = 0;
// settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
//Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// //Set active links
// if(settings.controlNav){
// $('.smart-controlNav a', slider).removeClass('active');
// $('.smart-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
// }
//Set active links
// if(settings.controlNav){
$('.navigation_sspro div', slider.parent()).removeClass('active');
$('.navigation_sspro div:eq('+ vars.currentSlide +')', slider.parent()).addClass('active');
// }
// //Process caption
// processCaption(settings);
// Remove any slices from last transition
// $('.smart-slice', slider).remove();
// Remove any boxes from last transition
// $('.smart-box', slider).remove();
$('#wrapperImage'+settings.random_time, slider).remove();
var currentEffect = settings.effect;
//Generate random effect
if(settings.effect == 'random'){
var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect == undefined) currentEffect = 'fade';
}
//Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') != -1){
var anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect == undefined) currentEffect = 'fade';
}
/* //Custom transition as defined by "data-transition" attribute
if(vars.currentImage.attr('data-transition')){
currentEffect = vars.currentImage.attr('data-transition');
} */
//Run effects
vars.running = true;
setTimeout(start_point,10);
if(currentEffect == 'sliceDown' || currentEffect == 'sliceDownRight' || currentEffect == 'sliceDownLeft'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.smart-slice', slider);
if(currentEffect == 'sliceDownLeft') slices = $('.smart-slice', slider)._reverse();
slices.each(function(){
var slice = $(this);
slice.css({ 'top': '0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(currentEffect == 'sliceUp' || currentEffect == 'sliceUpRight' || currentEffect == 'sliceUpLeft'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.smart-slice', slider);
if(currentEffect == 'sliceUpLeft') slices = $('.smart-slice', slider)._reverse();
slices.each(function(){
var slice = $(this);
slice.css({ 'bottom': '0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(currentEffect == 'sliceUpDown' || currentEffect == 'sliceUpDownRight' || currentEffect == 'sliceUpDownLeft'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var v = 0;
var slices = $('.smart-slice', slider);
if(currentEffect == 'sliceUpDownLeft') slices = $('.smart-slice', slider)._reverse();
slices.each(function(){
var slice = $(this);
if(i == 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
}
else if(currentEffect == 'fold'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
$('.smart-slice', slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:'0px', height:'100%', width:'0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(currentEffect == 'fade'){
createSlices(slider, settings, vars);
var firstSlice = $('.smart-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': slider_width + 'px'
});
firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('smart:animFinished'); });
}
else if(currentEffect == 'slideInRight'){
createSlices(slider, settings, vars);
var firstSlice = $('.smart-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': '0px',
'opacity': '1'
});
firstSlice.animate({ width: slider_width + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('smart:animFinished'); });
}
else if(currentEffect == 'slideInLeft'){
createSlices(slider, settings, vars);
var firstSlice = $('.smart-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': '0px',
'opacity': '1',
'left': '',
'right': '0px'
});
firstSlice.animate({ width: slider_width + 'px' }, (settings.animSpeed*2), '', function(){
// Reset positioning
firstSlice.css({
'left': '0px',
'right': ''
});
slider.trigger('smart:animFinished');
});
}
else if(currentEffect == 'boxRandom'){
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
var boxes = shuffle($('.smart-box', slider));
boxes.each(function(){
var box = $(this);
if(i == totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
}
else if(currentEffect == 'boxRain' || currentEffect == 'boxRainReverse' || currentEffect == 'boxRainGrow' || currentEffect == 'boxRainGrowReverse'){
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
// Split boxes into 2D array
var rowIndex = 0;
var colIndex = 0;
var box2Darr = new Array();
box2Darr[rowIndex] = new Array();
var boxes = $('.smart-box', slider);
if(currentEffect == 'boxRainReverse' || currentEffect == 'boxRainGrowReverse'){
boxes = $('.smart-box', slider)._reverse();
}
boxes.each(function(){
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if(colIndex == settings.boxCols){
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = new Array();
}
});
// Run animation
for(var cols = 0; cols < (settings.boxCols * 2); cols++){
var prevCol = cols;
for(var rows = 0; rows < settings.boxRows; rows++){
if(prevCol >= 0 && prevCol < settings.boxCols){
/* Due to some weird JS bug with loop vars
being used in setTimeout, this is wrapped
with an anonymous function call */
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if(currentEffect == 'boxRainGrow' || currentEffect == 'boxRainGrowReverse'){
box.width(0).height(0);
}
if(i == totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + time));
} else {
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
// alert(timeBuff);
}
// Shuffle an array
var shuffle = function(arr){
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
// For debugging
var trace = function(msg){
if (this.console && typeof console.log != "undefined")
console.log(msg);
}
// Start / Stop
this.stop = function(){
if(!$(element).data('smart:vars').stop){
$(element).data('smart:vars').stop = true;
trace('Stop Slider');
}
}
this.start = function(){
if($(element).data('smart:vars').stop){
$(element).data('smart:vars').stop = false;
trace('Start Slider');
}
}
// //Trigger the afterLoad callback
// settings.afterLoad.call(this);
return this;
};
$.fn.smartSlider = function(options) {
return this.each(function(key, value){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('smartslider')) return element.data('smartslider');
// Pass options to plugin constructor
var smartslider = new SmartSlider(this, options);
// Store plugin object in this element's data
element.data('smartslider', smartslider);
});
};
//Default settings
$.fn.smartSlider.defaults = {
effect : 'random', //'boxRain',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
random_time : "",
align_image : "left",
image_width : 765,
image_height : 500,
afterChange : function(){}
};
$.fn._reverse = [].reverse;
})(jQuery);
答案 0 :(得分：0)
如果更改第12行怎么办？
running: true,
和第14行：
stop: false
有用吗？我是一个建议，我不知道这个滑块，这是我想到的第一件事，希望它有所帮助