0
我试图打入我的创作模式和jQuery的背景渐变动画结合了flexslider我发现codepen here结合flexslider与背景渐变动画
我觉得然而，梯度动画功能以某种方式停止flexslider从工作。
我该怎么做才能让背景动画在flexslider背后（我将变成只是白色文字）？
这里是我的代码：
<!DOCTYPE html><html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Creative Web Denver</title>
<meta name="description" />
<meta name="author" />
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald|Open+Sans:400italic,600italic,700italic,400,700,600" />
<link rel="stylesheet" href="/stylesheets/flexslider.css" />
<link rel="stylesheet" href="/stylesheets/skeleton.css" />
<link rel="stylesheet" href="/stylesheets/layout.css" />
<!-- JS
================================================== -->
<script src="/javascripts/jquery.flexslider.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<header class="container">
<div class="sixteen columns">
<nav>
<ul>
<li>
<a href="http://creativewebdenver.businesscatalyst.com">home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">services</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="four columns">
<img src="/images/logo.png" id="logo" alt="Creative Web Design Denver Logo"/>
</div>
</header>
<div class="full-width slider-wrapper" id="gradient">
<div class="container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="/images/slider/creative-web-design-denver-slide-4.jpg"/>
</li>
<li>
<img src="/images/slider/creative-web-design-denver-slide-2.jpg"/>
</li>
<li>
<img src="/images/slider/creative-web-design-denver-slide-1.jpg"/>
</li>
<li>
<img src="/images/slider/creative-web-design-denver-slide-3.jpg"/>
</li>
</ul>
</div>
</div>
</div>
<div class="full-width">
<div class="container mainbody">
{tag_pagecontent}
</div>
</div>
<script>
var colors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.002;
function updateGradient()
{
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if (step >= 1)
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);
//@ sourceURL=pen.js
</script>
</body>
</html>