<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> <style type="text/css"> *{padding:0; margin:0;} ul{list-style-type:none;} ol li{list-style-type:none;} #box{width:700px; height:300px; border:1px solid #ccc; padding:5px; overflow:hidden; margin:0 auto; margin-top:300px; position:relative;} #box ol{ position:absolute; right:10px; top:250px;} #box ol li{float:left;width:20px; height:20px; margin-left:2px; cursor:pointer; text-align:center; line-height:20px; background-color:#fff; border:1px solid red; } #box ol li.bzf{background-color:#abcdef;} </style> <script type="text/javascript"> $(document).ready(function(){ var $NowIndex = 0; var $imgcount = $("#box ul li").length; $("#box ol li").mouseover(function(event){ var $index = $(this).index(); $("#box ul li").eq($index).fadeIn().siblings().fadeOut(); $(this).addClass("bzf").siblings().removeClass("bzf"); }); setInterval(function(){ if($NowIndex < $imgcount){ $("#box ul li").eq($NowIndex).fadeIn().siblings().fadeOut(); $("#box ol li").eq($NowIndex).addClass("bzf").siblings().removeClass("bzf"); $NowIndex++; }else{ $NowIndex = 0; } },1000); }); </script> <div id="box"> <ul> <li><img src="2.jpg"/></li> <li><img src="3.jpg"/></li> <li><img src="4.jpg"/></li> <li><img src="5.jpg"/></li> <li><img src="6.jpg"/></li> <li><img src="7.jpg"/></li> </ul> <ol> <li class="bzf">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> </div> </body> </html>
最终效果：
以下是素材：