!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><link href="#" /><script type="text/javascript" src="../华为轮播图/jquery-1.8.3.js"></script><style tppe="text/css">
*{margin:0;padding:0;}
ul li{list-style:none;}
img{border:0;}
.fstL{980px;margin:100px auto; overflow:hidden}
.flash{position:relative;980px;height:320px;overflow:hidden;}
.slider{position:relative;}
.slider li{float:left;position:absolute;left:0;top:0;}
.num{position:absolute;right:40px;bottom:20px;cursor:pointer;}
.num li{float:left;border-radius:50%;background:#06F;margin-left:10px;text-align:center;font:600 14px/24px Arial, Helvetica,sans-serif;color:#fff;height:24px;24px;}
.num li.on{background:#c00;}
</style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">
//焦点图
$(function() {
var index = 0,len = $(".num >li").length,timer;
$(".num li").mouseover(function() {
index = $('.num li').index(this);
showImg(index);
}).eq(0).mouseover();
$('.flash').hover(function() {
clearInterval(timer);
},function() {
timer = setInterval(function() {
showImg(index)
index++;
if(index == len){index = 0;}
},3000);
}).trigger("mouseleave");
});
function showImg(index) {
//$('.slider').stop(true,false).animate({left:-adWidth*index},800);
$('.slider li').eq(index).stop(true,false).fadeIn(200).siblings().stop(true,false).fadeOut(200);
$('.num li').removeClass('on').eq(index).addClass('on');
}
</script></head><body>
<div class="fstL">
<div class="flash" id="flash">
<ul class="slider">
<li><a href="#"><img src="banner_1.jpg" width="980" height="320"></a></li>
<li><a href="#"><img src="banner_2.jpg" width="980" height="320"></a></li>
<li><a href="#"><img src="banner_3.jpg" width="980" height="320"></a></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>