Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body><style type="text/css">Body {margin: 0; padding: 0;} ul, li {list-style-type: none; margin: 0; padding: 0 ;}# bigpic {width: 400px; height: 210px; overflow: hidden; position: relative;} # bigpic li {float: left;} # bigpic img {width: 400px; height: 210px; float: left; border: none;} # btn {position: absolute; bottom: 10px; right: 10px;} ul # sPic {position: absolute;} # btn. hover {color: # f00 ;}# btn a {color: # fff; text-decoration: none ;}</style><div id="bigpic"><ul id="sPic" ><li></li><li></li><li></li><li></li></ul><div id="btn">1234</div></div><script>cNum = 0;intAlphaStep=0.1;var bPic = document.getElementById('bigpic');var sPic = document.getElementById('sPic');var btn = document.getElementById('btn');var btnLink = btn.getElementsByTagName('a');function showPic(num){var endX = -(num*bPic.clientWidth);curOpacity = 0;function goimg(){X = parseInt(sPic.style.left)if(parseInt(sPic.style.left)==endX) return true;if((endX-X)>0){X += Math.ceil((endX - X) / 20 )}else{X += Math.floor((endX - X) / 20)}sPic.style.left = X + 'px';setTimeout(goimg,5)for(i=0;i<4;i++){btnLink[i].className = '';}btnLink[num].className = 'hover';}goimg();setOpacity();}function autoPic(){curOpacity = 0;if(cNum<3){showPic(cNum+1);cNum++;}else if(cNum=3){cNum=-1;}}function setOpacity(){curOpacity+=intAlphaStep;sPic.style.filter='alpha(opacity='+(curOpacity*100)+')';sPic.style.opacity = curOpacity;if(curOpacity<0.9){setTimeout('setOpacity()',100)}}bPic.onmouseover = function(){clearInterval(auto);}bPic.onmouseout = function(){auto = setInterval(autoPic,2000);}auto = setInterval(autoPic,2000);</script></body></html>
Tip: you can modify some code before running
