Vertical scrollable list

[Harley1979]

Hi, I need some help with some javascript I am trying to write. Unfortunately my skills are not that great although I think I know what it is in principle the script needs to perform.

I just need an idea really of what it is I need to know to be able to do this, or a good resource of information or tutorials that might aid me.

Basically I want to extrapolate an unordered list in my html and write the list items <li> into an array . The reason you might ask, why I must have it forst hardcoded into my html is because this needs to be accessible for those who do not have js turned on (you will see from my code below what I am going for here).

Then I want to use my new array to populate a new unordered list but limit the list to display three items at a time; the current item selected and the one above and below the current item. The list will be a vertical scrollable list so some sort of mouse detection will be involved.

Also when you reach the end of the list it needs to start back at the start so it is one continuous loop.

I guess really I am trying to replicate something similar to a carousel model but I want something I can tailor, so I would prefer if possible to code it all myself.

Does anybody have an ideas or good tutorials to point me in the right direction?

Regards

<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript">

function switchTo(i) {
$('#staticContent div').fadeIn("def").css('display','none').eq(i).css('display','block');
}

$(document).ready(function(){


$('#scrollingContent li a').click(function(event){
switchTo($('#scrollingContent li a').index(event.target));});

switchTo(0);

});

</script>

<style type="text/css">
#container{
background-image:url(images/step-bg.gif);
width:286px;
height:116px;
overflow:hidden;}

#scrollingContent{
padding:0;
margin:0;
position:relative;
top:9px;
float:left;
height:96px;
overflow:hidden;}

#staticContent{
padding:0;
margin:0;
position:relative;
top:9px;
left:60px;
width:103px;
height:96px;
float:left;}

#staticContent div {
display: none;}

#staticContent div.active {
display: block;}

#staticContent h3{
font-size:1.2em;
margin:4px 0;}

#staticContent p a{
font-weight:bold;}

#scrollingContent ul{
margin:0 0 0 15px;}

#scrollingContent ul li{
list-style:none;
background-image:none;
font-size:2.1em;
text-align:center;
padding:0;
font-weight:bold;}

#scrollingContent a:link{
color:#FFFFFF;
text-decoration:none;}
#scrollingContent ul li a:visited{
color:#FFFFFF;
text-decoration:none !important;}
#scrollingContent ul li a:hover{
color:#FFFFFF;
text-decoration:none;}
#scrollingContent ul li a:active{
color:#FFFFFF;
text-decoration:none;}

</style>

<div id="container">

<div id="scrollingContent">
<ul>
<li><a href="#step1" class="active">Step 1</a></li>
<li><a href="#step2">Step 2</a></li>
<li><a href="#step3">Step 3</a></li>
<li><a href="#step4">Step 4</a></li>
<li><a href="#step5">Step 5</a></li>
<li><a href="#step6">Step 6</a></li>
</ul>
</div>

<div id="staticContent">

<div id="step1" class="active">
<h3>Step 1</h3>
<p>Lorem ipsum dolor sit amet</p>
<p><a href="#">...Go to Step 1</a></p>
</div>

<div id="step2">
<h3>Step 2</h3>
<p>Lorem ipsum dolor sit amet</p>
<p><a href="#">...Go to Step 2</a></p>
</div>

<div id="step3">
<h3>Step 3</h3>
<p>Lorem ipsum dolor sit amet</p>
<p><a href="#">...Go to Step 3</a></p>
</div>

<div id="step4">
<h3>Step 4</h3>
<p>Lorem ipsum dolor sit amet</p>
<p><a href="#">...Go to Step 4</a></p>
</div>

<div id="step5">
<h3>Step 5</h3>
<p>Lorem ipsum dolor sit amet</p>
<p><a href="#">...Go to Step 5</a></p>
</div>

<div id="step6">
<h3>Step 6</h3>
<p>Lorem ipsum dolor sit amet</p>
<p><a href="#">...Go to Step 6</a></p>
</div>

</div>
</div>