html结构如图：
<div class="row ">
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">需求分析</p>
<p class="pro-con"><span class="pro-dot"></span>需求调研</p>
<p class="pro-con"><span class="pro-dot"></span>项目流程图</p>
<p class="pro-con"><span class="pro-dot"></span>项目结构图</p>
<p class="pro-con"><span class="pro-dot"></span>项目需求表</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">产品设计</p>
<p class="pro-con"><span class="pro-dot"></span>项目原型图</p>
<p class="pro-con"><span class="pro-dot"></span>产品设计文档</p>
<p class="pro-con"><span class="pro-dot"></span>产品交互设计</p>
<p class="pro-con"><span class="pro-dot"></span>数据库字典</p>
<p class="pro-con"><span class="pro-dot"></span>时间规划表</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step"><span></span>界面设计</p>
<p class="pro-con"><span class="pro-dot"></span>界面效果图</p>
<p class="pro-con"><span class="pro-dot"></span>界面设计规范</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">前端开发</p>
<p class="pro-con"><span class="pro-dot"></span>静态页面编写</p>
<p class="pro-con"><span class="pro-dot"></span>页面效果开发</p>
<p class="pro-con"><span class="pro-dot"></span>网站性能优化</p>
<p class="pro-con"><span class="pro-dot"></span>网站维护</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">页面测试</p>
<p class="pro-con"><span class="pro-dot"></span>设计效果图测试</p>
<p class="pro-con"><span class="pro-dot"></span>静态页面测试</p>
<p class="pro-con"><span class="pro-dot"></span>部分功能组件测试</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">程序编码</p>
<p class="pro-con"><span class="pro-dot"></span>开发文档</p>
<p class="pro-con"><span class="pro-dot"></span>开发源码</p>
<p class="pro-con"><span class="pro-dot"></span>试用版本</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">软件测试</p>
<p class="pro-con"><span class="pro-dot"></span>修复记录</p>
<p class="pro-con"><span class="pro-dot"></span>测试报告</p>
</div>
<div class="col-lg-1-8 step-middle">
<img src="IMG/product-img24.png">
<p class="pro-step">打包发布</p>
<p class="pro-con"><span class="pro-dot"></span>打包发布</p>
</div>
</div>
js
$(function() {
//声明变量
var step_middle = document.getElementsByClassName(".step-middle");
var play;
var index = 0;
var i = 0;
var j = 0;
//显示方法
function show(j) {
for (i = 0; i < step_middle.length; i++) {
//选中状态
$(step_middle[j]).find("img").attr("src", "IMG/product-img15.png");
//未选中状态
$(step_middle[j]).siblings().find("img").attr("src", "IMG/product-img24.png");
}
}
//鼠标移入显示方法
for (i = 0; i < step_middle.length; i++) {
step_middle[i].index = i;
step_middle[i].onmouseover = function() {
index = this.index;
show(this.index);
}
}
//定时器
function lunbo() {
play = setInterval(function() {
index++;
if (index > step_middle.length) index = 0;
show(index);
}, 3000);
}
//调用轮播
lunbo();
//鼠标移入清除定时器
step_middle.onmouseover = function() {
clearInterval(play);
}
//鼠标移入添加定时器
step_middle.onmouseout = function() {
clearInterval(play);
lunbo();
}
})
第一，getElementsByClassName方法class前面不加（.）点，不明白明明用了jquery为什么还要用原生的
var step_middle = document.getElementsByClassName("step-middle");
第二，显示方法用了siblings()就不需要用for循环了
function show(j) {
//选中状态
$(step_middle[j]).find("img").attr("src", "IMG/product-img15.png");
//未选中状态
$(step_middle[j]).siblings().find("img").attr("src", "IMG/product-img24.png");
}
第三，这里应该是 >=if (index >= step_middle.length) index = 0;
第四，step_middle是数组，你不能为数组绑定onmouseover、onmouseout事件。要在for循环中绑定
for (i = 0; i < step_middle.length; i++) {
step_middle[i].index = i;
step_middle[i].onmouseover = function() {
index = this.index;
clearInterval(play);
show(this.index);
}
step_middle[i].onmouseout = function() {
clearInterval(play);
lunbo();
}
}
建议先 在setInterval的回调里console.log()下 看看到底有没有执行定时器的回调