效果图如下:
代码如下:
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Try JQuery</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div class="ad" >
<ul class="slider" >
<li><img src="images/ads/1.gif"/></li>
<li><img src="images/ads/2.gif"/></li>
<li><img src="images/ads/3.gif"/></li>
<li><img src="images/ads/4.gif"/></li>
<li><img src="images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scripts/main.js" type="text/javascript"></script>
</body>
</html>
styles/main.css
/*
base css
*/
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none outside none;
}
.clear {
clear: both;
}
/*
page css
*/
#main_container {
background-color: #eeeeee;
width: 960px;
margin: 0 auto;
}
#main_container .ad {
margin: 100px auto;
width:586px;
height:150px;
overflow:hidden;
position:relative;
}
.ad .slider,.ad .num{
position:absolute;
}
.ad .slider li{
display: inline;
}
.ad .num {
bottom: 5px;
right: 5px;
}
.ad .num li{
float: left;
color: #FF7300;
cursor: pointer;
border: 1px solid #FF7300;
background-color: #fff;
margin: 3px 1px;
width: 16px;
height: 16px;
text-align: center;
}
.ad .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
scripts/main.js
$(function(){ var showImg = function(index){ var adHeight = $(".ad").height(); $(".slider").stop(true,false).animate({top : -adHeight*index},1000); $(".num li").removeClass("on") .eq(index).addClass("on"); } var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function(){ index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); $('.ad').hover(function(){ clearInterval(adTimer); },function(){ adTimer = setInterval(function(){ showImg(index) index++; if(index==len){index=0;} } , 3000); }).trigger("mouseleave"); });