如何在从顶部滚动时暂停转盘/滑块,并在滚动到顶部时重新开始
How can I pause carousel/slider when I scroll from top and start again when I scroll to top?
我想达到页面上的效果:http://www.jovaconstruction.com/
我完成了";模糊";正如我的客户所希望的那样,模糊图像的不透明度随着滚动而改变,但我无法实现旋转木马/滑块会暂停的效果。我尝试了几种方法,但都没有接近解决方案。
网站的快速描述:我有两个部分的滑块/旋转木马作为背景,它应该和示例页面一样有效。
我的代码:
html
<div class="slider">
<div id="bg1" class="background activeslide"><div id="bg1blur" class="bluredbg"></div></div>
<div id="bg2" class="background"><div id="bg2blur" class="bluredbg"></div></div>
<div id="bg3" class="background"><div id="bg3blur" class="bluredbg"></div></div>
<div id="bg4" class="background"><div id="bg4blur" class="bluredbg"></div></div>
</div>
css
.background{
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#bg1{
background: url('../img/bg1.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg2{
background: url('../img/bg2.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg3{
background: url('../img/bg3.jpg');
position:fixed;
width:100%;
z-index:-10;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bg4{
background: url('../img/bg4.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg1blur{
background: url('../img/bg1blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg2blur{
background: url('../img/bg2blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg3blur{
background: url('../img/bg3blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg4blur{
background: url('../img/bg4blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
.activeslide{
opacity:1 !important;
}
.bluredbg{
opacity:0;
}
js滑块
var displayTime = 5000; //Time between animations
var currIdx = 0; //Index for loops
var $slides = $('.slider .background'); //Html elements to cycle between
function animateBG() {
currIdx = (currIdx < 3) ? currIdx + 1 : 0; //We set counter
setTimeout(function() { //Timeout for repetition
$slides.removeClass('activeslide'); //We remove class .activeslide from last element
$slides.eq(currIdx).addClass('activeslide').fadeIn(0, function() { //We add class to new element. 0 is trans. time(in this case css doc is doing this)
animateBG();
});
}, displayTime) //Displaytime is var = here we set last of animation of displaying 1 slide
}
js-不透明度
//script for chng.opacitynclass .activeslide while scrolling down.
$(window).on('scroll', function () {
var pixs = $(document).scrollTop()
pixsiv = pixs / 500;
$(".activeslide>.bluredbg").css({"opacity":+pixsiv})
});
希望一切都清楚。做了什么,我想要什么。
谢谢。
计算窗口的偏移量如何?:
window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // All browsers, except IE9 and earlier
alert(window.pageXOffset + window.pageYOffset);
} else { // IE9 and earlier
alert(document.documentElement.scrollLeft + document.documentElement.scrollTop);
}
我解决问题的方法有点不同。
我使用了引导程序和jquery功能。
首先,我将我的旋转木马重建为引导程序标准。第二,我使用了jquery scrollTop()函数:
$document.scroll(function() {
if ($document.scrollTop() > 5) {
$('.carousel').carousel('pause');
} else {
$('.carousel').carousel();
}
});
解决方案正是我想要的。
相关文章:
- 滚动固定滚动顶部()的跳跃效果
- 当偏移量改变时滚动顶部
- 滚动顶部在滑动后不起作用切换
- 使滚动顶部始终检查
- 页面滚动在粘性页脚布局中保持滚动顶部位置
- 滚动顶部闪烁-Internet Explorer
- j查询滚动顶部麻烦
- 我如何使用滚动顶部()获取HTML文档的位置
- 滚动顶部到元素 - 20px
- JQuery 偏移和滚动顶部问题
- 滚动事件仅在滚动顶部时触发
- 单击并滚动顶部
- 每次在顶部滚动顶部重置
- IE <选择>滚动顶部
- 打开对话框正在更改我的滚动顶部位置
- 为什么有时滚动顶部/滚动左不可写
- 滚动顶部 Jquery
- 数据表在页面更改时滚动顶部
- 使用滚动顶部显示滚动的像素
- 可以 jQuery invalidHandler 通过父窗口中的 iframe 滚动顶部