效果展示说明
页面代码，在一个div框中用img标签放置图片和小圆点
<div id="box01"><img src="img/fengxueshanshenmiao.jpg"/><img src="img/sandazhujiazhuang.jpg" /><img src="img/shuihuAll.jpg" /><img src="img/wusongdahu.jpg" /><img src="img/zhiqushengchengang.jpg"/></div><div id="lunboyuanquan"><ul><li></li><li></li><li></li><li></li><li></li></ul> </div>
js代码（使用jquery）
<script>$(function(){$("#box01>img").hide();$("#box01>img:first").show();$("#lunboyuanquan>ul>li:first").addClass("redBG").siblings().addClass("grayBG");var ind = 0;function autoPlay(){ind = ++ind%5;$("#box01>img").eq(ind).stop(true).fadeIn().siblings().stop(true).fadeOut();$("#lunboyuanquan>ul>li").eq(ind).addClass("redBG").siblings().removeClass("redBG");}var play = setInterval(autoPlay,2000);/*当鼠标移入图片,轮播停止*/$("#box01>img").hover(function(){clearInterval(play);},function(){play = setInterval(autoPlay,2000);});/*鼠标移入哪个小圆点，显示对应的图片*/$("#lunboyuanquan>ul>li").hover(function(){ind = $(this).index();$("#box01>img").eq(ind).fadeIn().siblings().fadeOut();$("#lunboyuanquan>ul>li").eq(ind).addClass("redBG").siblings().removeClass("redBG");clearInterval(play);},function(){play = setInterval(autoPlay,2000);});});</script>
css样式代码
#lunboyuanquan{
width: 240px;
height: 50px;
position: absolute;
margin-left: 600px;
margin-top: 340px;
}
#lunboyuanquan>ul>li{
width: 15px;
height: 15px;
background: gray;
margin: 10px;
float: left;
border-radius: 50%;
list-style: none;
}
#lunboyuanquan>ul>li.redBG{
background: red;
}
#box01 img{
width: 100%;
height: 400px;
position: absolute;
}
