第一次写定时器，没什么效果

Question

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();
    }
})

Answer 1

第一，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();
        }
    }