Question

我们的网站上有一个滑块，已经工作了两年半，突然间它在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 PAGE 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;}

Answer 1

我发现了问题所在。

我们的网站连接到Cloudflare，所有流量都被它过滤掉了。当我禁用Cloudflare时，我们的滑块再次开始工作。

滑块不再工作

1 个答案: