Mat*_*ord 6 javascript sharepoint jquery bxslider
我的一些工作一直存在问题,我现在离开的同事为了实施而写了bxSlider.
我在修复另一个问题时确定了问题bxSlider停止工作2天前没有代码更改.
我间歇地得到:
TypeError: slider is undefined .../Pages/Home.aspx Line 1023
这是一个SharePoint 2013 webpart实现,而不是真正重要的问题,但只是给出一些背景知识.
var slider= $('#slider2').bxSlider({
auto: true,
controls: false,
pager:false,
pause: 10000,
slideWidth: (sir ? sirina:300),
slideHeight: 450,
randomStart: true,
autoHover: true,
onSliderLoad: function (currentIndex) {
slider.goToNextSlide();
},
onSlideNext: function (slide, oldIndex, newIndex)
{
var current = slider.getCurrentSlide();
var id = slide[0].id;
var prev = slide.prev();
var next = slide.next();
var previd = prev[0].id;
var nextid = next[0].id;
displayImages(id, previd, nextid)
},
onSlidePrev: function (slide, oldIndex, newIndex)
{
var current = slider.getCurrentSlide();
var id = slide[0].id;
var prev = slide.prev();
var next = slide.next();
var previd = prev[0].id;
var nextid = next[0].id;
displayImages(id, previd, nextid)
}
});
我开始在bxSlider网页上查看和研究滑块以获得一些了解.我注意到的第一件事是对.bxSlider的调用需要在$(document).ready(function(){.我实现的实现不是,所以我在原始函数周围添加了.这似乎有意义,因为这是间歇性的让我感到震惊,这取决于#slider2的DOM元素是否已经加载.它永远不会在以前从未加载过该网站的机器上的全新浏览器上工作,因此缓存部分页面可加快负载并获得在此脚本加载之前页面上的#slider2,但仍然没有区别.
所以开始阅读bxSlider网页上的示例,特别注意这个例子. http://bxslider.com/examples/custom-next-prev-selectors 它使用一种完全不同的技术,以使用户点击到下一个或上一张幻灯片.
所以我尝试重新设计以遵循这种模式.
$('#slider2').bxSlider({
auto: true,
controls: false,
pager:false,
pause: 10000,
slideWidth: (sir ? sirina:300),
slideHeight: 450,
randomStart: true,
autoHover: true,
nextSelector: '#leftFr',
prevSelector: '#rightFr',
onSlideNext: function (slide, oldIndex, newIndex)
{
var id = slide[0].id;
var prev = slide.prev();
var next = slide.next();
var previd = prev[0].id;
var nextid = next[0].id;
displayImages(id, previd, nextid)
},
onSlidePrev: function (slide, oldIndex, newIndex)
{
var id = slide[0].id;
var prev = slide.prev();
var next = slide.next();
var previd = prev[0].id;
var nextid = next[0].id;
displayImages(id, previd, nextid)
}
});
这消除了对滑块变量的需要,但引入了不同的问题,从而消除了这个问题.首先,下一个和上一个按钮不起作用,因为文档说它应该,并且在页面的初始加载时,滑块未填充,也没有使用正确的文本设置下一个和上一个按钮.这就是原始onSliderLoad函数通过立即更改滑块的功能.
onSlideLoad事件的第一个增强是当前滑块的索引.我还没有找到如何使用这个值正确填充滑块:所以我做了一些关于如何使用.bxSlider方法的研究,滑块变量看起来似乎是正确的方法. bx slider:如何在单击默认bx寻呼机后继续自动滑动？.所以我将代码还原并取消了我的更改,但仍未找到"slider is undefined"的解决方案.这是完整的文档就绪功能,因为它与初始问题一致:
$(document).ready(function () {
$("iframe").contents().find(".timeline").css("background", 'rgba(0,0,0,0)');
changeFeeds();
var t2 = JSVar;
var sirina = w;
var dolzina = h;
var sir=false;
var dol=false;
//read more...starts
var MORE = "... More...", LESS = " Less...";
$(".moreAdHoc").each(function () {
var $ths = $(this),
txt = $ths.text();
var p = $ths.find('.pid');
var idValue = p.text();
$ths.text("");
$ths.append($("<span>").text(txt.substr(0, 300)));
$ths.append($("<span>").text(txt.substr(300, txt.length)).hide());
$ths.append(
$("<a class=morelink onclick=openNewsContent(" + idValue + ")>").text(MORE).click(function () {
var $ths = $(this);
if ($ths.text() == MORE) { }
else {
$ths.prev().hide();
$ths.text(MORE);
}
})
);
});
$(".moreWhatsNew").each(function () {
var $ths = $(this),
txt = $ths.text();
var p = $ths.find('.pwhatsNewid');
var p1 = $ths.find('.pwhatsNewSite');
var idValue = p.text();
var siteValue = p1.text();
$ths.text("");
$ths.append($("<span>").text(txt.substr(0, 300)));
$ths.append($("<span>").text(txt.substr(300, txt.length)).hide());
$ths.append(
$("<a class=morelink onclick=openWhatsNewNewsContent(" + idValue + ",'" + siteValue + "')>").text(MORE).click(function () {
var $ths = $(this);
if ($ths.text() == MORE) { }
else {
$ths.prev().hide();
$ths.text(MORE);
}
})
);
});
//read more...ends
var slider= $('#slider2').bxSlider({
auto: true,
controls: false,
pager:false,
pause: 10000,
slideWidth: (sir ? sirina:300),
slideHeight: 450,
randomStart: true,
autoHover: true,
onSliderLoad: function (currentIndex) {
slider.goToNextSlide();
},
onSlideNext: function (slide, oldIndex, newIndex)
{
var current = slider.getCurrentSlide();
var id = slide[0].id;
var prev = slide.prev();
var next = slide.next();
var previd = prev[0].id;
var nextid = next[0].id;
displayImages(id, previd, nextid)
},
onSlidePrev: function (slide, oldIndex, newIndex)
{
var current = slider.getCurrentSlide();
var id = slide[0].id;
var prev = slide.prev();
var next = slide.next();
var previd = prev[0].id;
var nextid = next[0].id;
displayImages(id, previd, nextid)
}
});
$('.pronext').click(function () {
slider.goToNextSlide();
return false;
});
$('.proprev').click(function () {
slider.goToPrevSlide();
return false;
});
$('#rightFr').click(function () {
slider.goToNextSlide();
return false;
});
$('#leftFr').click(function () {
slider.goToPrevSlide();
return false;
});
});
小智 -1
对于您的第二个（ $('#slider2').bxSlider ）解决方案，您是否尝试添加 startSlide 选项（startSlide: 0）来准确指定要从哪个项目开始？
如果这仍然不起作用，您能否指定“...下一个和上一个按钮不能像文档所说的那样工作...”的含义？