本文主要是介绍JavaScript Jquery 首页图片轮流播放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
图片轮播效果:
(这里需要引入Jquery)
代码:
CSS:
/*banner*/
.banner_index{height:355px;position: relative;overflow:hidden;width:960px; margin:0 auto; margin-top:55px;}
.banner_index .btn,.banner_pro .bBtn{position: absolute;top:105px;width: 56px;height: 78px;display: block;z-index: 3;}
.banner_index .btnPre,.banner_pro .bPre{background: url(../images/bg_btnPre_index.png) no-repeat 0 0;left:20px;}
.banner_index .btnPre:hover,.banner_pro .bPre:hover{background: url(../images/bg_btnPre_index_hover.png) no-repeat 0 0;}
.banner_index .btnNext,.banner_pro .bNext{background: url(../images/bg_btnNext_index.png) no-repeat 0 0;right: 20px;}
.banner_index .btnNext:hover,.banner_pro .bNext:hover{background: url(../images/bg_btnNext_index_hover.png) no-repeat 0 0;}
.banner_index .banner_wrap{position: absolute;left:0px;top: 0px; z-index: 2;}
.banner_index .banner_wrap li{width:960px; height:295px;float: left;}
.indexBanner_num{width:960px;margin: 0 auto;padding:0px;text-align: center; margin-top:-35px; position:relative; z-index:9999;}
.indexBanner_num a{width: 10px;height: 10px;display: inline-block;_zoom:1;background: url(../images/bg_num.png) no-repeat 0 0;font-size: 0px;line-height: 0px;margin:0 3px;}
.indexBanner_num a.on,.indexBanner_num a:hover{background: url(../images/bg_num_on.png) no-repeat 0 0;}.qie_left{ width:660px; height:355px; float:left; overflow:hidden; text-indent:0.25em }
.qie_right{ width:300px; height:355px; float:left; overflow:hidden; color:#333;}
.qie_kong{ width:300px; height:355px; position:relative; z-index:22;}
.qie_bg{ width:300px; height:355px; background:#ffffff;filter:alpha(opacity=70);opacity:0.7; position:relative; top:-355px; z-index:1;}
.qie_right span{ display:block; float:left;}
.qr_left{ width:240px; height:200px; margin-bottom:15px; margin-left:36px; _margin-left:33px; margin-top:60px;overflow:hidden;}
.qr_left p{ font-size:14px; font-family:"微软雅黑","黑体","宋体"; text-align:justify; line-height:20px; text-indent:24px;}
.qr_left b{ font-size:16px; font-family:"微软雅黑","黑体","宋体";}
.qr_left font{ margin-left:40px; font-size:14px; font-weight:bold;}
.qr_tit{ height:30px; margin-bottom:10px;}
.qr_right{ width:150px; height:295px; overflow:hidden;}
.qr_right img{ margin-left:50px; mar这篇关于JavaScript Jquery 首页图片轮流播放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
