幻灯片显示每张幻灯片上的字体颜色更改+回调字体设置滚动时的颜色
我试图在头元素中完成一些事情。 首先，我想将jquery幻灯片设置为相对。 其次，我会将我的png徽标和导航链接固定在幻灯片前面。 因为有些幻灯片会很暗，有些会很亮，所以我需要使用logo + nav链接来改变设置颜色，因为图像会循环播放，因此可以随时阅读。
到目前为止，似乎我可以通过div循环完成这两项任务，但由于图像是相对的并且徽标+导航将被修复，我将需要固定div的背景的不透明度来改变它的不透明度向下滚动时，幻灯片向上滚动并离开视图，显示0 – 100。
而且由于logo + nav的颜色有时会是一种颜色，有时候是另一种颜色取决于显示的幻灯片，我需要添加一个额外的回调告诉logo + nav在滚动时返回黑色，无论滚动时是什么开始了。
我在这里有半工作的DEMO 。
此演示显示滚动时的幻灯片+ div不透明度。 通过他们在小提琴中不是很好玩，他们在我的实际网站上一起工作得很好。
随意拆开它。 谢谢！
这是你想要的？ http://jsfiddle.net/MNFTT/89/
CSS：
#slideshow{ position:relative; top:0; left:0; } #slideshow ul, #slideshow li{ margin:0; padding:0; list-style-type:none; } .slideshow_item{ position:absolute; left:0; top:0; list-style-type:none; } .slideshow_item img{ margin:0; padding:0; vertical-align:bottom; } div.fademe { width: 100%; position: fixed; display: block; height: 150px; background: #ffffff; z-index: 8; } #header-wrapper { padding: 0; margin: 0 auto; } #header { position: fixed; width: 100%; height: 100px; z-index: 9; margin: 0 auto; } #header .inner { margin: 0 auto; padding: 0 25px 0 25px; width: 950px; height: 100px; z-index: 10; } #header-logo { background:url(http://img585.imageshack.us/img585/4227/xlogo.png); width:71px; height:51px; margin: 0 auto; margin-top: 31px; background-repeat: no-repeat; } #navbar { text-align: justify; margin-top: 25px; } #navbar a{ font-family: "ss-bol", Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; } #navbar a:hover{ font-family: "ss-bol", Helvetica, Arial, sans-serif; font-size: 14px; color: #595959; } #navbar span { width: 100%; display: inline-block; } #page { width: 100px; height: 100%; } HTML
-
-
TEXT FOR SCROLLING .....
JS：
/* slideshow */ $(function(){ var slide_pos = 0; var slide_len = 0; slide_len = $(".slideshow_item").size() - 1; $(".slideshow_item:gt(0)").hide(); slide_int = setInterval(function() { slide_cur = $(".slideshow_item:eq(" + slide_pos + ")"); slide_cur.fadeOut(2000); slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1)); slide_cur = $(".slideshow_item:eq(" + slide_pos + ")"); slide_cur.fadeIn(2000); }, 5000); var divs = $('.fademe'); var navbar_a=$('#navbar a'); var navbar=$('#navbar'); divs.css('opacity', 0); $(window).scroll(function() { var imgH=$('.slideshow_item').height(); var percent = $(document).scrollTop()/imgH; divs.css('opacity', percent); var bg=Math.round(255-(percent*255)); bg=bg>0?bg:0; var fg=255-(bg/2+128); console.log(percent,imgH,fg); divs.css('background-color','rgb('+bg+','+bg+','+bg+')'); navbar_a.css('color','rgb('+fg+','+fg+','+fg+')'); }); });