jquery首页图片轮播

css样式

.bannerBox {position: relative;width: 100%;height: 348px;margin:0px auto;}
.bannerBox .bannerList {position: relative;width: 100%;height: 348px;overflow: hidden; text-align:center;}
.bannerList li {position: absolute;top: 0;left: 50%; margin-left:-1000px;width:2000px;height: 348px;}
#numList {position: absolute;left:50% ;bottom: 5px;}
#numList li {width: 15px;height: 15px;float: left;color: #fff;border-radius: 15px;background: #fff;text-align: center;margin-right: 5px;cursor: pointer; text-indent:-9999px;}
#numList li.curr {background: #F9A853;}
容器
<div id="bannerBox" class="bannerBox"></div>

<script type="text/javascript">
function bannerRun(container,num,imgUrl){
console.log(imgUrl)
$("#bannerBox").append($("<ul id='bannerList' class='bannerList'></ul>"))
for(var m =0;m<num;m++ ){
$("#bannerList").append($("<li>"+imgUrl[m]+"</li>"))
}
var t = n = 0, count;
count=$("#bannerList li").length;
$("#bannerList li:not(:first-child)").hide();
$("#bannerList").after( $('<ul id="numList"></ul>'));
for(i=1;i<=$("#bannerList li").length;i++){
if(i==1) $("#numList").append($("<li class=\"curr\">"+i+"</li>"));
else $("#numList").append($("<li>"+i+"</li>"));
}
$("#numList li").click(function() {
var i = $(this).text()-1;//获取Li元素内的值，即1，2，3
n = i;
if (i >= count) return;
$("#bannerList li").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("bannerBox").style.background="";
$(this).toggleClass("curr");
$(this).siblings().removeAttr("class");
});
t = setInterval(function(){
showAuto();
}, 4000);
$("#bannerBox").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
function showAuto(){
n = n >=(count - 1) ? 0 : ++n;
$("#numList li").eq(n).trigger('click');
}
}

var imgUrl = ['<a href="messDetail.html" target="_blank"><img src="images/banner/banner01.png" width="2000" height="348"></a>',
'<a href="messDetail.html" target="_blank"><img src="images/banner/banner02.png" width="2000" height="348"></a>',
'<a href="messDetail.html" target="_blank"><img src="images/banner/banner03.png" width="2000" height="348"></a>'
]
bannerRun("#bannerBox",3,imgUrl);
</script>

来源：https://www.cnblogs.com/ouyang2014/p/4106156.html