1.html页面准备图片,显示其中一张,其他图片利用绝对定位重叠
<pre name="code" class="html"><body>
<div id="focus">
<ul >
<li style="display:block"><a href="" ><img src="./img/4.jpg"></a></li>
<li><a href=""><img src="./img/1.jpg"></a></li>
<li><a href=""><img src="./img/2.jpg"></a></li>
<li><a href=""><img src="./img/3.jpg"></a></li>
</ul>
</div>
</body>
2.css样式
<style type="text/css">
body,*,ul,li{margin: 0;padding:0;list-style: none}
#focus{
width: 1000px;
height: 400px;
margin: 100px auto;
position: relative;
}
#focus ul li {
position: absolute;
top: 0;
left:0;
display: none;
}
#focus ul li img{
width: 1000px;
height:400px;
}
</style>
3.引入jquery文件,编写切换函数
<pre name="code" class="javascript"><script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var i=0;
setInterval(move, 2000);
function move(){
if(i>3){
i=0;
}else{
$('#focus ul li').eq(i).fadeIn(2000).siblings('li').fadeOut(2000);
i++;
}
}
});
</script>