Question

Im using a script to rotate through various images stored in an un-ordered list. The script is working, but seems to remove preset classes applied to a specific Li. I want the script to work exactly as it is currently, but not remove a class that I set on an Li. Can someone offer some suggestions or modifications? Thank you. See the example fiddle here:

http://jsfiddle.net/trobbins26/5U4Cr/5/

Or script below:

function theRotator() {
        //Set the opacity of all images to 0
        $('div.rotator ul li').css({opacity: 0.0});

        //Get the first image and display it (gets set to full opacity)
        $('div.rotator ul li:first').css({opacity: 1.0});

        //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

        setInterval('rotate()',4000);

        }

        function rotate() {    
        //Get the first image
        var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

        if ( current.length == 0 ) current = $('div.rotator ul li:first');

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

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


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 500);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');

        };
setTimeout(function(){
        $(document).ready(function() {        
            //Load the slideshow
            theRotator();
            $('div.rotator').fadeIn(500);
            $('div.rotator ul li').fadeIn(500); // tweek for IE
        });
        }, 500);

Answer 1

This script is not the problem, you must have another script stripping out the classes. I must mention, however, that you do not currently have any “preset” classes on your list items currently. The only class being applied is the “show” class which is expected. This class is properly being removed, also as expected.

I’ve reproduced your slider with two classes (that offer background colors for emphasis) to demonstrate that this does indeed work. I did not change any of the jquery.

View the demo here: http://fluidev.com/stack/rotate.html