Member Avatar for Surfsup

I have this simple slideshow script and just need to make the divs fade in/out when the user clicks 'prev' and 'next' arrow. Currently there is no effect atall which looks a bit harsh. I'm sure this can't be too difficult - however, I'm new to this stuff - Thanks.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A Basic Slideshow</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
    #slideshow {
        border: 1px solid #ccc;
        padding: 10px;
        width: 600px;
        height: 280px;
        }

        #slideshow ul {
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            }

            #slideshow ul li {
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                }

                #slideshow ul li.current {
                    display: block;
                    }

            #slideshow li img {
                float: left;
                margin-right: 20px;
                }


        #slideshow #controls {
            width: 100%;
            text-align: right;  
            }

    </style>
    </head>

    <div id="slideshow">

        <div id="controls">
    <a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a>
        </div>

        <ul>
            <li><img src="img/1.jpg" width="387" height="258" alt="" /><p>Phasellus</p></li>
            <li><img src="img/2.jpg" width="387" height="258" alt="" /><p>Fusce libero quam</p></li>
            <li><img src="img/3.jpg" width="387" height="258" alt="" /><p>Aliquam at semper nisi.</p></li>
        </ul>

    </div>



    <script type="text/javascript">
    (function($) {
        var len = $("#slideshow li").length;
        var x = 0;
        $("#slideshow #total").text(len);
        $("#slideshow li:eq(0)").addClass("current");
        $("#slideshow li").each(function() {
            $(this).attr('rel', x);
            x++
        }); 
        $("#next").click(function() {
            var current = $("#slideshow .current");
            var next = parseFloat(current.attr('rel'))+1;
            if(next==len) {
                return false;
            }
            $("#num").text(parseFloat(next)+1);
            current.removeClass('current');
            $("#slideshow li").each(function() {
                if($(this).attr('rel')==next) {
                    $(this).addClass('current');
                }
            });                                 
        });
        $("#prev").click(function() {
            var current = $("#slideshow .current");
            var prev = parseFloat(current.attr('rel'))-1;
            if(prev<0) {
                return false;
            }
            $("#num").text(parseFloat(prev)+1);
            current.removeClass('current');
            $("#slideshow li").each(function() {
                if($(this).attr('rel')==prev) {
                    $(this).addClass('current');
                }
            });                                 
        });                 
    })(jQuery)
    </script>
    </body>
    </html>

Thanks

Dan

  • 2 Contributors
  • 1 Reply
  • 265 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.