脚本源代码：
<body>
<style>
body {background-color:#999999}
#all {width:100px; height:200px; background-color:#FFFFFF; overflow:hidden; }
#left {width:100px; background-color:#F90FF1; float:left; height:200px}
#left li {cursor:hand; font:bold 12px "Arial Black"; list-style:circle; margin-left:-10px; color:#FFFFFF}
#right {width:100px; background-color:#FFFF00; float:left; height:200px; cursor:hand;font:bold 15px "Arial Black"; color: #333333}
</style>
<script language="javascript">
function $(id) {return document.getElementById(id)}
function left(id) {
var alla= $("alla");
var right= $("right");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==0) {
if (id==1) {right.innerHTML="#5AE9FA";;right.style.backgroundColor="#5AE9FA"}
else if (id==2) {right.innerHTML="#ADFA5A";right.style.backgroundColor="#ADFA5A"}
else if (id==3) {right.innerHTML="#F9A40F";;right.style.backgroundColor="#F9A40F"}
left_decrease()
}
if (alla_left==-100) {right_decrease()}
}
function left_decrease() {
var alla= $("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==-100) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left-1;
time= setTimeout("left_decrease()",1)
}
}
function right_decrease() {
var alla= document.getElementById("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==0) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left+1;
time= setTimeout("right_decrease()",1)}
}
</script>
<div id="all">
<div id="alla" style="margin-left:0px; width:200px">
<div id="left">
<ul>
<li onclick="left(1)" style="color:#5AE9FA">color1</li>
<li onclick="left(2)" style="color:#ADFA5A">color2</li>
<li onclick="left(3)" style="color:#F9A40F">color3</li>
</ul>
</div>
<div id="right" onclick="left()"></div>
</div>
</div>
</body>
