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