javascript - 如何从 JQuery Slider 中删除 Opcity

Question

我正在为我的图像 slider 使用 jquery。我的 slider 工作正常，但有一个问题。当图片相互交换时，由于不透明度，我可以看到当前图片上最后一张图片的反射，我希望当新图片进入 slider 时，最后一张图片应该没有反射，这是我的代码

    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');

        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');

        // uncomment the 3 lines below to pull the images in random order

        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({opacity: 1.0})
            .addClass('active')
            .animate({opacity: 1}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }

    $(function() {
        setInterval( "slideSwitch()", 3000 );
    });

    </script>
<div id="slideshow">  
    <img src="FrontPage Images/background2.png"  style="width: 1158PX;
left: 0px;
top: 0px;
height: 230px;"/>
    <img src="FrontPage Images/background3.png"  style="width: 1158PX;
left: 0px;
top: 0px;
height: 230px;" />
     <img src="FrontPage Images/background4.png" style="width: 1158PX;
left: 0px;
top: 0px;
height: 230px;"/>
</div>

Answer 1

尝试使用此代码，以便您的图像淡入淡出并平滑循环:

jQuery:

$(document).ready(function ()
{
var change = function()
{
    var current = ($('div.contain img.show') ? $('div.contain img.show') : $('div.contain img:first'));
    if (!current.length) current = $('div.contain img:first');
   var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.contain img:first') : current.next()) : $('div.contain img:first'));

   // var $active = $('#slideshow IMG.active');

   /*

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');


    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    */

    // $active.addClass('last-active');

    next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
         current.animate({opacity: 0.0}, 1000) 
            .removeClass('show');

};

var thebackground = function ()
{
$('div.contain img').css(
{
    opacity: 0.0
});
$('div.contain img:first').css(
{
    opacity: 1.0
});
setInterval(function () {change()}, 5000);
}
 thebackground();
 $('div.contain').fadeIn(1000); // works for all the browsers other than IE
 $('div.contain img').fadeIn(1000); // IE tweak
});

jFiddle 演示在这里:http://jsfiddle.net/LynchJustRules/g2tLn/6/