定时器轮播

<div class="step">
	<div class="container">
		<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>
	</div>
	<a class="step-more" href="procedure.html">查看详情</a>
</div>

$(function() {

	//声明变量
	var step_middle = $(".step-middle");
	var play;
	var index = 0;
	var i = 0;
	var j = 0;

	//显示方法
	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");
	}

	//鼠标移入显示方法
	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();
        }
    }

	//定时器
	function lunbo() {
		play = setInterval(function() {
			index++;
			if (index >= step_middle.length) index = 0;
			show(index);
		}, 2000);
	}

	//调用轮播
	lunbo();

})

效果图 

第一次写，写的不好，大家有更优化的写法，欢迎评论，一起进步谢谢