JavaScript学习视频link
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#commentary{
margin: auto;
width: 526px;
position: relative;
}
#tu{
height: 280px;
width: 520px;
margin:50px auto;
border: 3px solid black;
}
#l,#r{
position: absolute;
top: 50%;
margin-top: -18px;
}
#r{
right: 0;
}
#circle{
width: 56px;
height: 13px;
background-color: pink;
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -32px;
}
li{
float: left;
margin-right:10px;
}
#tu img{
display: none;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oPrev=document.getElementById('l');
var oNext=document.getElementById('r');
var alist=document.getElementsByTagName('li');
var oTU=document.getElementById('tu');
var aImg=oTU.getElementsByTagName('img');
var iNow=0;
var timer=null;
function tab(){
for (var i=0;i<3;i++){
aImg[i].style.display='none';
}
aImg[iNow].style.display='block';
}
function fnNext(){
iNow++
if(iNow==3){iNow=0;}
tab();
}
for(var i=0;i<3;i++){
alist[i].abc=i;
alist[i].οnclick=function(){
iNow=this.abc;
for (var i=0;i<3;i++){
aImg[i].style.display='none';
}
aImg[this.abc].style.display='block';
};
}
oNext.οnclick=fnNext;
oPrev.οnclick=function(){
iNow--
if(iNow==-1){iNow=2;}
tab();
};
clearInterval(timer);
timer=setInterval(function(){
fnNext();
},500);
oTU.οnmοuseοver=function(){
clearInterval(timer);
};
oTU.οnmοuseοut=function(){
clearInterval(timer);
timer=setInterval(function(){
fnNext();
},500);
};
};
</script>
</head>
<body>
<div id="commentary">
<div id="tu">
<img src="comment1.png" style="display: block;">
<img src="comment2.png" >
<img src="comment3.png" >
</div>
<img src="left.jpg" id="l">
<img src="right.jpg" id="r">
<ul id="circle">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>