我用恒星视差来制作网站
演示:http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html
我使用的文件来自webtuts: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
我想要实现的是，在中心的"固定"img中添加一个类，并根据活动的数据幻灯片对其进行更改。
当我点击菜单上的一个按钮时，我可以改变图像的类，但是当我使用滚动条导航时，图像的类不会改变。
所以我试着添加这个脚本:
$(document).ready(function() {
if ($('#quatre').hasClass('active')){
$('#circle').addClass('trans4');
}
else(){
$('#circle').removeClass('trans4');;
}});
});
作为#second是幻灯片的id, #img-center是页面中心图像的id，但它不起作用
我也试过这个代码:
if(dataslide == 4){
$('#circle').addClass('trans4');
}
但这也不起作用
我完全是一个javascript新手，我找不到一个方法来做这个。
这是HTML
<ul class="navigation">
<li id="un" data-slide="1"></li>
<li id="deux" data-slide="2"></li>
<li id="trois" data-slide="3"></li>
<li id="quatre" data-slide="4"></li>
</ul>
<div id="circle"></div>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<!-- start content -->
<div class="content clearfix">
<div class="name">
<h1>NOM</h1>
</div>
<div class="txt">
<h2>some text</h2>
</div>
</div><!-- end content -->
<a class="button" data-slide="2" title=""></a>
</div>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="content">
<div class="txt">
<h3>some text</h3>
</div>
</div>
<a class="button" data-slide="3" title=""></a>
</div><!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="content">
<div class="txt">
<h3>some text</h3>
</div>
</div>
<a class="button" data-slide="4" title=""></a>
</div><!--End Slide 3-->
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<ul>
<li class="rond" data-stellar-ratio="1.5" data-stellar-vertical-offset="-55"alt=""></li>
<li class="rond" data-stellar-ratio="1.25" data-stellar-vertical-offset="-53"alt=""></li>
<li class="rond" data-stellar-ratio="2.7" data-stellar-vertical-offset="-150"alt=""></li>
<li class="rond" data-stellar-ratio="3" data-stellar-vertical-offset="-100"alt=""></li>
<li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-75"alt=""></li>
<li class="rond" data-stellar-ratio="2.2" data-stellar-vertical-offset="-55"alt=""></li>
<li class="rond" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""></li>
<li class="rond" data-stellar-ratio="2" data-stellar-vertical-offset="-15"alt=""></li>
<li class="rond" data-stellar-ratio="1.3" data-stellar-vertical-offset="-150"alt=""></li>
<li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""></li>
<li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-55"alt=""></li>
<li class="rond" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""></li>
<li class="rond" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt=""></li>
<li class="rond" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt=""></li>
<li class="rond" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""></li>
</ul>
<div class="content">
<div class="txt">
<h3>some text</h3>
</div>
</div>
</div><!--End Slide 4-->
这是js
jQuery(document).ready(function ($) {
//initialise Stellar.js
$(window).stellar();
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//Setup waypoints plugin
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
if(dataslide == 4){
$('#circle').addClass('trans4');
}
});
只在页面加载时触发一次:
$(document).ready(function() {
if ($('#quatre').hasClass('active')){
$('#circle').addClass('trans4');
}
else(){
$('#circle').removeClass('trans4');;
}});
这将触发每次窗口滚动，我相信这是你想要的:
$(window).scroll(function() {
if ($('#quatre').hasClass('active')){
$('#circle').addClass('trans4');
}
else(){
$('#circle').removeClass('trans4');;
}});