js实现图片变化
CSS
.home{ position: relative; width: 100%; height: 900px; overflow: hidden; } .home #tup{ position: absolute; } .home #tup img{ /*position: absolute;*/ }
HTML
<div class="home"> <div id="tup"> <img id="image" src="/static/images/service.jpg"></div> </div>
JS
$(function () { var curIndex = 0; //时间间隔(单位毫秒) ,每秒钟显示一张 var timeInterval = 2000; var arr = new Array(); arr[0] = "/static/images/service.jpg" arr[1] = "/static/images/equip.jpg" arr[2] = "/static/images/operation.jpg" function changeImg() { if (curIndex == arr.length-1){ curIndex = 0; } else{ curIndex += 1; } $('#image').attr('src',arr[curIndex]); //此处arr[curIndex]为路径,不需要加引号 } setInterval(changeImg,timeInterval); })