请看本站首页轮播图，本人较懒没有写图片轮播的动画效果，需要更多动画效果的可以自己写！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客轮播</title>
</head>
<style>
#ad{
width:100%;
display: flex;
height: 260px;
z-index: 1;
box-shadow: #ddd 1px 1px 5px;
}
.lb{
display: none;
width: 100%;
height: 260px;
}
.li{
width: 15px;
height: 15px;
line-height: 15px;
list-style: none;
text-align: center;
color:rgb(8, 152, 212);
border: paleturquoise 1px solid;
border-radius: 50%;
padding: 3px;
z-index: 2;
margin-right: 5px;
}
.id{
background: paleturquoise;
}
.ceng{
display: flex;
float: right;
margin-top: -40px;
margin-right: 20px;
}
</style>
<body>
<div id="ad">
<img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunbo.jpg"/>
<img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboii.jpg"/>
<img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboiiii.jpg"/>
</div>
<div class="ad">
<ol class="ceng">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
</ol>
</div>
</body>
<script src="../jquery.min.js"></script>//这里引入jquery文件，自己去官网下载引入！
<script>
$('#ad .lb').eq(0).show();//显示第一张图
$('.ad .li').eq(0).addClass('id');//显示第一个指示点
for(var i=0;i<$('.ad li').length;i++){
$('.ad .li').eq(i).attr('abc',i);
}
var runs = setInterval(run,3000);//设置轮播时长
var num = 0;//初始化
function run(){
$('#ad .lb').eq(num).hide(); //隐藏上一张图片
$('.ad .li').removeClass('id'); //删除一个指示点样式
num++;
$('.ad .li').eq(num).addClass('id');//添加一个指示点样式
$('#ad .lb').eq(num).slideDown(1000);//显示下一张图片
if(num>=$('.ad .li').length-1){
num=-1;
}
}
$('.ad .li').mouseover(function(){
$('.ad li').removeClass('id'); //添加一个指示点样式
$(this).addClass('id'); //删除一个指示点样式
$('#ad .lb').hide();
$('#ad .lb').eq($(this).attr('abc')).show();
clearInterval(runs); //停止轮播
})
$('.ad .li').mouseout(function(){
runs = setInterval(run,3000); //重新设置轮播时长
num = $(this).attr('abc'); //获取列表的排序
})
</script>
</html>
