<script type="text/javascript">

window.onload=function()

{

var container=document.getElementById('container');

var list=document.getElementById('list');

var buttons=document.getElementById('buttons').getElementsByTagName('span');

var prev=document.getElementsById('prev');

var next=document.getElementsById('next');

}

function animate(offset)

{

list.style.left=parseInt(list.style.left)+offset+'px';

}

next.onclick=function()

{

animate(-1024);

}

prev.onclick=function()

{

animate(1024);

}

</script>

</head>

<div id="container">

    <div id="list" style="left: -1024px;">

     <img src="jiaodian/1.jpg" alt="1"/>

     <img src="jiaodian/2.jpg" alt="1"/>

     <img src="jiaodian/3.jpg" alt="1"/>

     <img src="jiaodian/4.jpg" alt="1"/>

     <img src="jiaodian/5.jpg" alt="1"/>

    </div>

    <div id="buttons">

        <span index="1" class="on"></span>

        <span index="2"></span>

        <span index="3"></span>

        <span index="4"></span>

        <span index="5"></span>

    </div>

    <a href="javascript:;" id="prev" class="arrow">&lt;</a>

    <a href="javascript:;" id="next" class="arrow">&gt;</a>

</body>

</html>