JavaScript Jquery 首页图片轮流播放

最新推荐文章于 2021-06-19 05:41:11 发布

黄汉升

最新推荐文章于 2021-06-19 05:41:11 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 编程思想文章标签： JavaScript 图片轮流播放

本文链接：https://blog.youkuaiyun.com/u010113911/article/details/32315553

该博客介绍了如何使用JavaScript和jQuery创建首页图片轮播效果。通过引入jQuery库，配合CSS和HTML，实现了图片的自动切换。内容包括必要的CSS样式、JavaScript逻辑以及HTML结构，并对代码进行了分析和可能的错误检查。

图片轮播效果:

(这里需要引入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:16p