[英]jQuery image slider not working with jQuery-cycle (ASP.NET)
我正在ASP.NET Web应用程序上使用jQuery实现“强制性”图像滑块。 我可以看到第一张图片,但是当我按下下一个或上一个按钮时,它不起作用。
我也安装了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>
Java脚本
<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表示脚本的缩小版本。)
并把您的电话包装在准备好的块中
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.