我正致力于在我的 ASP.NET 网络应用程序上使用 jQuery 实现强制性图像 slider 。我可以看到第一张图片,但是当我按下一张或一张按钮时,它不起作用。
我也安装了 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>
最佳答案
删除重复项 <script type="text/javascript" src="~/Scripts/jquery.cycle.all.min.js"></script>
您已经调用了它(.min 表示脚本的缩小版本。)
并将你的调用包装在一个就绪 block 中
<script type="text/javascript">
$( document ).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
timeout: 3000,
pause: 1
});
});
</script>
更新: 我使用您的确切代码创建了一个片段。它工作得很好。 这表明您的其他脚本正在干扰。
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
timeout: 3000,
pause: 1
});
#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="slider-nav">
<div id="next">⟩</div>
<div id="prev">⟨</div>
<div id="slider">
<img src="//placehold.it/250x250/ff00ff" alt="image">
<img src="//placehold.it/250x250/0000ff" alt="image">
<img src="//placehold.it/250x250/00ff00" alt="image">
</div>
</div>
关于javascript - jQuery 图像 slider 不适用于 jQuery 循环 (ASP.NET),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42568396/