我想制作一个带有主页标题的滑块。我刚刚从一个网站中复制并粘贴了超大的脚本,其中滑块和标题看起来效果很好。
问题是: -Slider不会在页面加载时显示,当我调整窗口大小时会显示它。
*标题仅显示第一张,第二张和最后一张幻灯片。对于那些在第二个和最后一个之间的幻灯片,即使显示也没有显示标题。这个问题通过一个棘手的解决方案得以解决。
JS:
$(window).on('load', function () {
//arrows
$("#nextslide").click(function () {
api.nextSlide();
});
$("#prevslide").click(function () {
api.prevSlide();
});
//end arrows
var get_img_src = [];
if ($('#admin_supersized').find('img').length) {
$("#admin_supersized div.photoGalleryElement div.thumbnail:last-child").addClass("last-child");
var galleryData = $('#admin_supersized .photoGalleryElement .thumbContents a').map(function (ind, img) {
return {
image : $(img).attr('src') || $(img).attr('href')
}
});
$('#admin_supersized .photoGalleryElement .thumbContents a').each(function (i, v) {
v = $(v);
get_img_src.push({
src : $(v).attr('src') || $(v).attr('href')
});
});
var galArr = $.makeArray(galleryData);
function slider(data) {
$("#supersized").empty();
$.supersized({
slide_interval : 10000,
transition_speed : 1000,
performance : 0,
horizontal_center : 1,
vertical_center : 1,
slide_links : 'empty',
slides : data,
transition : 6,
image_protect : 0,
//======================
fit_always : 0
});
$('html').addClass('supersized_loaded');
}
slider(galArr);
var li_itself = [];
$('.rhs-banner li').each(function (i, e) {
e = $(e);
li_itself.push({
li : $('a', e).attr('target'),
li_s : $(e),
li_a : $('a', e).html()
});
});
var a_title = [];
$('.rhs-banner #admin_supersized a').each(function (i, v) {
v = $(v);
a_title.push({
title : $(v).attr('title')
});
if (typeof li_itself[i].li !== typeof undefined && li_itself[i].li !== false) {
if (!$('body.editmode').length) {
$(li_itself[i].li_s).append('<div class="img_caption">' + a_title[i].title + '</div>');
}
} else {
if (!$('body.editmode').length) {
$('#supersized').waitForImages({
finished : function () {
$('html').addClass('images_loaded');
var dum = $('#supersized').html();
// console.log(dum);
var img_att = $('#supersized li.slide-2 a img').attr('style');
var img_src = $('#supersized li.slide-2 a img').attr('src');
// console.log(img_att +''+ img_src );
},
each : function (i) {
// console.log(i);
},
waitForAll : true
});
$('.supersized_loaded').onAvailable(function () {
$('html').addClass('img_attr_on');
});
$('.img_attr_on').onAvailable(function () {
// if ( $(window).width > 1270 ) {
$(li_itself[i].li_s).append('<a target="_blank"><img class="top_0" img src=' + get_img_src[i].src + '></a>');
$(li_itself[i].li_s).append('<div class="img_caption">' + a_title[i].title + '</div>');
// }
});
}
}
});
} else { //Default Image
$.supersized({
slide_interval : 10000,
transition_speed : 800,
performance : 0,
horizontal_center : 1,
vertical_center : 1,
slide_links : 'empty',
slides :
[{
image : '/Templates/MainFolder/default-banner/default.jpg'
},
]
});
}
});
$(window).on('load resize', function () {
tier1Height();
function tier1Height() {
// Height Variables
var windowHeight = $(window).height();
var windowWidth = $(window).width();
if (windowWidth > 768) {
$("#section0, .tier-1").css('height', windowHeight);
} else if (windowWidth == 768) {
$("#section0, .tier-1").css('height', windowHeight - headerHeight - 221);
} else if (windowWidth < 768 && windowWidth > 501) {
$("#section0, .tier-1").css('height', '320px');
} else if (windowWidth < 500) {
$("#section0, .tier-1").css('height', '280px');
}
}
});