Jquery focus map for image display effect code_jquery

The rendering is as follows:


Demo code:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Jquery image display focus image</title> <style type="text/css"> *{ margin:0px; padding:0px; list-style:none; border:0px;} body{ font-size:12px; color:white;} #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} #imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;} #imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;} </style> <div id="imageShow"> <ul id="imageSrc"> <li> <img src="http://files.jb51.net/demoimg/201005/o_1.gif" alt="Jquery focus map for image display effect code_jquery" > </li> <li> <img src="http://files.jb51.net/demoimg/201005/o_2.gif" alt="Jquery focus map for image display effect code_jquery" > </li> <li> <img src="http://files.jb51.net/demoimg/201005/o_3.gif" alt="Jquery focus map for image display effect code_jquery" > </li> <li> <img src="http://files.jb51.net/demoimg/201005/o_4.gif" alt="Jquery focus map for image display effect code_jquery" > </li> <li> <img src="http://files.jb51.net/demoimg/201005/o_5.gif" alt="Jquery focus map for image display effect code_jquery" > </li> </ul> <ul id="imageSwitch"> <li> </li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>5</div>