滑塊不再工作

我們在我們的網站上有一個滑塊，它已經工作了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;}

來源

2017-10-19 Alex

Java對於JavaScript來說就像火腿對倉鼠 – Reimeus

感謝您澄清@Reimeus。 – Alex

我發現了什麼問題了。

我們把我們的網站連接到了Cloudflare，所有的流量都被它過濾了。當我禁用Cloudflare時，我們的滑塊再次開始工作。

來源

2017-10-20 17:19:59 Alex

滑塊不再工作

回答

相關問題