Search code examples
jqueryslideshowkeyboard-eventskeyup

how do I get a jquery slideshow to go to the next slide when user presses the right arrow key


OK so here is the scenario, I want the user to be able to press the right and left arrow keys on the keyboard and make the jquery slideshow on the page trigger the next slide. I would like to use the right arrow key but any key other than enter, space, or tab will do (I ONLY WANT ONE KEY TO DO THIS). I was thinking something like

$('#target').keyup(function(event){.doslide();}

or something any help will be greatly appreciated.

<script type="text/javascript">
                            var slo=null;
                            var sola = Array();
                            var prev = 0;
                            var cur = 1;
                            var timi=null

                            jQuery.noConflict()
                            jQuery(document).ready(function() {
                                sol = $(".slide")
                                var sho = document.getElementById('slidya').getElementsByTagName('a');

                                for(var i=1;i<sho.length-1;i++)sola.push(sho[i]);

                                for(var i=1;i<sol.length;i++)sol[i].style.display = 'none';                        

                                timi = window.setInterval('doslide()',10000);

                            })
                            function doslide()
                                {
                                    $(sol[prev]).fadeOut(3000);
                                    $(sol[cur]).fadeIn(3000);
                                    sola[prev].className = 'number'
                                    sola[cur].className = 'number select'

                                    prev = cur++;
                                    if(cur>sol.length-1)
                                    {
                                        cur=0;
                                        prev= sol.length-1;
                                    }
                                }
                                function prevnext(mode)
                                {
                                    window.clearInterval(timi);timi=null;

                                    if(mode)
                                    {
                                        if(cur>sol.length-1)
                                        {
                                            cur=0;
                                            prev= sol.length-1;
                                        }
                                        doslide();      
                                    }
                                    else
                                    {
                                        cur--;
                                        prev--;

                                        if(prev<0)
                                        {
                                            cur=0;
                                            prev= sol.length-1;
                                        }
                                        if(cur<0)
                                        {
                                            cur=sol.length-1;
                                            prev=cur-1 ;        
                                        }

                                        $(sol[cur]).fadeOut(3000);
                                        $(sol[prev]).fadeIn(3000);
                                        sola[cur].className = 'number'
                                        sola[prev].className = 'number select' 
                                    }
                                    timi = window.setInterval('doslide()',10000)
                                }
                                function thisisit(aiyo)
                                {
                                    cur = aiyo
                                    window.clearInterval(timi);timi=null;

                                    $(sol[cur]).fadeIn(1000);
                                    $(sol[prev]).fadeOut(1000);
                                    sola[cur].className = 'number select'
                                    sola[prev].className = 'number'

                                    prev=cur
                                    ++cur;
                                    if(prev<0)prev = sol.length-1;
                                    timi = window.setInterval('doslide()',10000)     
                                }


                        </script>

Solution

  • I would try something like this:

    var VK_LEFT = 37,
        VK_UP =  38,
        VK_RIGHT =  39,
        VK_DOWN = 40;
    
    $(document).keydown(function(e){
       var key = (e.keyCode ? e.keyCode : e.which);
    
       if(key==VK_RIGHT)
           doslideright();
       else if(key==VK_LEFT)
           doslideleft();
    });