jquery - jQuery 循环效果:scrollHorz 无法正常工作
问题描述
这个问题已经在这里被问过很多次了,我已经按照所有给定的答案,但没有任何用处。我被滑块的“scrollHorz”卡住了。jQuery cycle
以下是它的HTML:
<div id="cycleNav"></div>
<div id="wrapper">
<div id="container">
<div id="prev"></div>
<div id="prevOpacity"></div>
<div id="dvPauseContainer" class="playing" data-is-paused="0"></div>
<button id="pause"></button>
<div id="pauseOpacity"></div>
<div id="slider" class="playing" data-is-paused="0">
<img src="~/XImages/1.jpg" width="900" height="350" alt="Flight 1">
<img src="~/XImages/2.jpg" width="900" height="350" alt="Flight 1">
<img src="~/XImages/3.png" width="900" height="350" alt="Flight 1">
<img src="~/XImages/4.png" width="900" height="350" alt="Flight 1">
</div>
<div class="controller" id="next"></div>
<div class="controller" id="nextOpacity"></div>
</div>
</div>
CSS是:
#wrapper {
height: 350px;
position: relative;
right: 0;
top: -120px;
}
#container {
overflow: auto;
}
#slider {
height: 350px;
width: 980px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
#slider > img {
left: 40px !important;
}
#prev {
background-image: url(/XImages/prev1.png);
background-repeat: no-repeat;
background-position: center center;
height: 50px;
width: 50px;
position: relative;
left: 0px;
top: 350px;
z-index: 99;
}
#prevOpacity {
background-color: white;
display: block;
height: 50px;
width: 50px;
position: relative;
z-index: 98;
top: 300px;
left: 0;
opacity: 0.5;
border-radius: 0px 25px 25px 0px;
}
#next {
background-image: url(/XImages/next1.png);
background-repeat: no-repeat;
background-position: center center;
float: right;
height: 50px;
width: 50px;
position: relative;
z-index: 97;
bottom: 183px;
right: 0;
border-radius: 25px 0px 0px 25px;
}
#nextOpacity {
background-color: white;
float: right;
height: 50px;
width: 50px;
position: relative;
z-index: 96;
bottom: 183px;
left: 50px;
opacity: 0.5;
border-radius: 25px 0px 0px 25px;
}
#dvPauseContainer {
position: relative;
top: 425px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: center center;
z-index: 94;
margin-left: auto;
margin-right: auto;
}
#pause {
background-color: transparent;
height: 40px;
width: 40px;
position: relative;
top: 385px;
left: 470px;
z-index: 94;
border: 1px ridge white;
opacity: 0.5;
}
#dvPauseContainer.paused {
background-image: url(/XImages/play1.png);
}
#dvPauseContainer.playing {
background-image: url(/XImages/pause1.png);
}
#cycleNav {
height: 16px;
position: relative;
top: 65px;
left: 440px;
}
a.box {
background-color: #ccf;
display: block;
float: left;
width: 12px;
height: 12px;
margin: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
a.activeSlide {
background-color: #8f8
}
我正在使用的javaScript是:
<script type="text/javascript">
jQuery(function ($) {
$('#slider').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
timeout: 0,
rev: true,
pager: '#cycleNav',
pagerAnchorBuilder: buildPagerBox
});
function buildPagerBox(i, el) {
return '<a href="#" class="box"></a>';
}
$('#pause').click(function () {
var slider = $('#dvPauseContainer');
var isPaused = slider.data('isPaused');
slider
.toggleClass('paused', !isPaused)
.toggleClass('playing', isPaused)
.data('isPaused', !isPaused);
$('#slider').cycle('toggle');
})
$('#slider').hover(
function () {
$(this).cycle('pause');
},
function () {
$(this).cycle('resume');
})
});
</script>
此代码适用于其他效果,如fade
等scrollDown
。
有人可以帮我找出错误。提前致谢。
解决方案
你的 CSS 把插件弄乱了。我一直在简化您的代码,直到问题消失。当我删除你的 CSS 时,插件开始工作。删除您的 CSS,然后将其添加回来,直到找到罪魁祸首。
推荐阅读
- form-recognizer - 已使用无法在 MS Flow 中检测到的标签进行训练的表单识别器模型
- r - 如何改变ggplot中椭圆的半透明度?
- c# - 将输入数据从 Web 应用程序保存到数据库
- ios - 为什么我的 sendEmailVerification(beforeUpdatingEmail) 函数不总是返回错误?
- java - 减小签名的 apk 大小
- python - ValueError:无法将输入数组从形状(424,16,3)广播到形状(128,160,3)
- github - 将 GitHub 操作标记为可选
- apache-kafka - Kafka Connect - 如果我无法直接访问 Kafka 集群,是否可以使用?
- r - 如何在 R 中使用 ggpairs 添加第二个图例?
- r - 非重叠山脊线图 R