0
我正在使用jQuery在ASP.NET Web應用程序上實現一個必須的圖像滑塊。我可以看到第一張圖片,但是當按下下一個或上一個按鈕時,它不起作用。jQuery圖像滑動條與jQuery循環(ASP.NET)不兼容
我安裝了jQuery.cycle插件,但不知道什麼是錯的。我需要另一個插件以及jQuery循環嗎?
的Html
<div id="slider-nav">
<div id="next">⟩</div>
<div id="prev">⟨</div>
<div id="slider">
<img src="~/img/img1.jpg" alt="image">
<img src="~/img/img2.jpg" alt="image">
<img src="~/img/img3.jpg" alt="image">
</div>
</div>
CSS
<style type="text/css">
#slider-nav{
width: 700px;
height: 280px;
position: relative;
margin: 50px auto;
}
#slider{
width: 700px;
height: 280px;
position: absolute;
overflow: hidden;
}
#next {
text-align: center;
line-height: 50px;
color: white;
width: 50px;
height: 50px;
background-color: black;
position: absolute;
top: 120px;
right: 0;
z-index: 99;
cursor: pointer;
opacity: 0;
}
#prev {
text-align: center;
line-height: 50px;
color: white;
width: 50px;
height: 50px;
background-color: black;
position: absolute;
top: 120px;
left: 0;
z-index: 99;
cursor: pointer;
opacity: 0;
}
#slider-nav:hover #next {
opacity: 1;
transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
}
#slider-nav:hover #prev {
opacity: 1;
transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
}
</style>
的Javascript
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
timeout: 3000,
pause: 1
});
</script>
沒有工作。我在html頁面中有其他腳本函數,沒有就緒塊,並且它們工作正常。 – Afton
這些腳本是否使用循環js?你可以確認在調用滑塊腳本之前,庫已經完全加載了嗎? – Marc
其他腳本沒有使用循環插件。我不確定如何確認在調用滑塊腳本之前庫已經完全加載,因爲我對此很新。 – Afton