Question

我试图在jquery中创建一个交叉淡化幻灯片，它可以工作，但它看起来像一个＆＃34; flash＆＃34;当淡出时任何人都可以帮助我吗？：

JQUERY：

$(document).ready(function() {
        slideShow();
        });
    function slideShow() {
    var showing = $('#comingsoon .is-showing');
        var next = showing.next().length ? showing.next(): showing.parent().children(':first');


showing.fadeOut(800,  function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');
setTimeout(slideShow, 2500);
}

HTML：

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
<title>Fantasy Craft</title>

</head>
<body>
<!-- Menu -->
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<br><br>
<!--Slideshow e mouseover -->


<div id="fantasycraft">
    <div class="fantasycraft-products">
        <div class="left">
            <div class="product" id ="currentl1">
                <img src="slider_coming_soon.jpg" onmouseover="rollover1(this)" onmouseout="mouseaway1(this)" />
            </div>
            <div class="product" id ="currentl2">
                <img src="slider_coming_soon.jpg" onmouseover="rollover2(this)" onmouseout="mouseaway2(this)" />
            </div>
        </div>
        <div class="right">
            <div class="product" id ="currentr1">
                <img src="slider_coming_soon.jpg" onmouseover="rollover3(this)" onmouseout="mouseaway3(this)" />
            </div>
            <div class="product" id ="currentr2">
                <img src="slider_coming_soon.jpg" onmouseover="rollover4(this)" onmouseout="mouseaway4(this)" />
            </div>
        </div>
        <div class="comingsoon" id="comingsoon" style="overflow:hidden">
            <img src="slider_coming_soon.jpg" class="is-showing" id="1" />
            <img src="slider_coming_soon2.jpg" id="2" class="2" />
            <img src="lone.png" id="3" class="3" />

        </div>

    </div>
    <div class="fantasycraft-content">
        <img src="ted.png"/>
    </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.js"></script>
<script src="script.js"></script>

</body>
</html>

褪色有效，但问题是：当它消失时，会出现白色闪光。

在jquery中交叉淡入淡出幻灯片

0 个答案: