[javascript]代码库
<style type="text/css">
#picture{
width:400px;
height:300px;
}
img{
width:300px;
height:200px;
}
ul{
width:60px;
float:right;
list-style:none;
}
ul li{
width:20px;
height:20px;
border:1px solid #000;
margin-top:5px;
text-align:center;
}
.bg{
background:"red";
}
</style>
<script type="text/javascript">
window.onload=init;
var timer;
var i=1;
function init(){
var objli1=document.getElementsByTagName("li")[0];
objli1.style.background="red";
var objul=document.getElementById('tupian');
var lis=objul.getElementsByTagName('li');
for(var n=0;n<lis.length;n++){
lis[n].index=n;
lis[n].onmouseover=function(){
ys();
this.style.background="red";
var j=this.index+1;
//alert(j);
var obj=document.getElementById("pic");
obj.src="/images/0"+j+".jpg";
window.clearInterval(timer);
i=j;
}
lis[n].onmouseout=function(){
this.style.background="";
timer=window.setInterval(tupian,1000);
}
}
timer=window.setInterval(tupian,1000);
}
function tupian(){
i++;
if(i>6){
i=1;
}
var obj=document.getElementById("pic");
obj.src="/images/0"+i+".jpg";
ys();
var yanse=document.getElementsByTagName("li")[i-1];
yanse.style.background="red";
}
function ys(){
var objul=document.getElementById('tupian');
var lis=objul.getElementsByTagName('li');
for(var n=0;n<lis.length;n++){
lis[n].style.background="";
}
}
function tostop(){
window.clearInterval(timer);
}
function tostart(){
timer=window.setInterval(tupian,1000);
}
function selectpic(n){
var m=n.innerHTML;
var obj=document.getElementById("pic");
obj.src="/images/0"+m+".jpg";
window.clearInterval(timer);
}
</script>
</head>
<body>
<div id="picture">
<img id="pic" src="\images\01.jpg" alt="" onmouseover="tostop()" onmouseout="tostart()"/>
<ul id="tupian">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>