滑块不再工作
问题描述：
我们在我们的网站上有一个滑块，它已经工作了2年半，突然间它今天在Chrome中停止工作。这是多个页面的滑块，它不再适用于任何页面。滑块不再工作
如果你有一个视网膜屏幕，会有一个不同的滑块，它仍然有效。
这里是与滑块的一个页面的链接：http://agentboris.com/listings/20-scrivener-417.php
我们一直在使用被称为jquery的文件：jQuery的1.11.2.min.js
HTML ：
<div id="container" class="hidephone" style="position: relative" >
<img src="../sold.gif" height="45" width="113" class="sold" />
<ul>
<li><img src="images/5-westgrove/1.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/2.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/3.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/4.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/5.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/6.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/7.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/8.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/9.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/10.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/11.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/12.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/13.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/14.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/15.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/16.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/17.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/18.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/19.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/20.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/21.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/22.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/23.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/24.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/25.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/26.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/27.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/5-westgrove/28.jpg" class="round" width="1000" height="550" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
ON页中的JavaScript：
$(window).load(function(){
var pages = $('#container li'), current=0;
var currentPage,nextPage;
var timeoutID;
var buttonClicked=0;
var handler1=function(){
buttonClicked=1;
$('#container .button').unbind('click');
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
currentPage.fadeTo('slow',0.3,function(){
nextPage.fadeIn('slow',function(){
nextPage.css("opacity",1);
currentPage.hide();
currentPage.css("opacity",1);
$('#container .button').bind('click',handler1);
});
});
}
var handler2=function(){
if (buttonClicked==0)
{
$('#container .button').unbind('click');
currentPage= pages.eq(current);
if (current >= pages.length-1)
current=0;
else
current=current+1;
nextPage = pages.eq(current);
currentPage.fadeTo('slow',0.3,function(){
nextPage.fadeIn('slow',function(){
nextPage.css("opacity",1);
currentPage.hide();
currentPage.css("opacity",1);
$('#container .button').bind('click',handler1);
});
});
timeoutID=setTimeout(function(){
handler2();
}, 8000);
}
}
$('#container .button').click(function(){
clearTimeout(timeoutID);
handler1();
});
timeoutID=setTimeout(function(){
handler2();
}, 8000);
CSS：
#container{
width:1000px;
height:550px;
position:relative;
padding: 0;
margin: 0;
left: 0;
top:0;
}
#container ul{
width:1000px;
height:550px;
list-style:none outside none;
position:relative;
overflow:hidden;
padding: 0;
margin: 0;
list-style:none;
}
#container li:first-child{
display:list-item;
position:absolute;
padding: 0;
margin: 0;
}
#container li{
position:absolute;
display:none;
padding: 0;
margin: 0;
}
#container .prevButton{
height:72px;
width:68px;
position:absolute;
background: url('buttons.png') no-repeat;
top:515px;
margin-top:-36px;
cursor:pointer;
z-index:60;
background-position:left top;
left:0
}
#container .prevButton:hover{
background-position:left bottom;left:0;}
#container .nextButton{
height:72px;
width:68px;
position:absolute;
background: url('buttons.png') no-repeat;
top:515px;
margin-top:-36px;
cursor:pointer;
z-index:60;
background-position:right top;
right:0
}
#container .nextButton:hover{
background-position:right bottom;right:0;}
答
我发现了什么问题了。
我们把我们的网站连接到了Cloudflare，所有的流量都被它过滤了。当我禁用Cloudflare时，我们的滑块再次开始工作。
Java对于JavaScript来说就像火腿对仓鼠 – Reimeus
感谢您澄清@Reimeus。 – Alex