jquery_cycle

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Slider_next_prev_pause_resume</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
    #main { margin: 20px }
    #nav { margin: 15px }
    #nav li { float: left; list-style: none}
    #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
    #nav li.activeSlide a { background: #faa; color: black }
    #nav a:focus { outline: none; }
</style>
<script type="text/javascript">
    var desc = new Array();
    function onAfter(curr, next, opts) {
        var index = opts.currSlide;
        //alert(desc[index]);
    }
$(function() {
$i=0;
$('#slideshow').before('<div id="nav">').cycle({
    fx:     'scrollHorz',
        //speed:  'fast',
        timeout:  1000,
        prev:    '#prev',
        next:    '#next',
        pager:   '#nav',
        after:  onAfter,
        pagerAnchorBuilder: pagerFactory,
        //pagerEvent: 'keyup',
        //pauseOnPagerHover:
});
    $(document.documentElement).keyup(function (e) {
        if (e.keyCode == 39)
        {
           $('#slideshow').cycle('next');
        }
        else if (e.keyCode == 37)
        {
            $('#slideshow').cycle('prev');
        }
        else if (e.keyCode == 13)
        {
            $i = !$i;
            if ($i == 1)
            {
            $('#slideshow').cycle('pause');
            $('#pause').show();
            }
            else
            {
            $('#slideshow').cycle('resume');
            $('#pause').hide();
            }
        }
});
    function pagerFactory(idx, slide) {
        var s = idx > 7 ? 'style="display:none"' :'';
        return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
    };
});
</script>
</head>
<body>
<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div>
<div id="main">
    <div style="width:700px;margin: 0 auto;clear:left;">
        <div id="demos">
            <div id="slideshow" class="pics" style="clear:both;margin-top:10px;float:left">
                <img src="http://malsup.github.com/images/beach1.jpg" />
                <img src="http://malsup.github.com/images/beach2.jpg" />
                <img src="http://malsup.github.com/images/beach3.jpg" />
                <img src="http://malsup.github.com/images/beach4.jpg" />
                <img src="http://malsup.github.com/images/beach5.jpg" />
                <img src="http://malsup.github.com/images/beach6.jpg" />
                <img src="http://malsup.github.com/images/beach7.jpg" />
                <img src="http://malsup.github.com/images/beach8.jpg" />
            </div>
            <div id="isiteks" style="margin:15px; float:left">
                ini sebuah teks sahaja
            </div>
            <div style="clear:both"></div>
        </div>
        <div id="pause" style="display:none">Pause</div>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
    _uacct = "UA-850242-2";
    urchinTracker();
    </script>
</div>
</body>
</html>