<script type="text/javascript">
var arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
function pf(t) {
t.src = arr[Math.floor(Math.random()*arr.length)]
}
script>
$("#navi1").hover(function(){$(this).css("background","url(图片地址1)")
},function(){
$(this).css("background","url(图片地址2)")
})
那5个框 是5个div 捕捉div获得鼠标移动事件
每个div里面有个小的div用来显示图片
当鼠标移动 这里通过算法显示背景图片 背景图片就一张通过
url(https://img.alicdn.com/tfs/TB1PZB0fyqAXuNjy1XdXXaYcVXa-100-1500.png) center 0px / 100% no-repeat 里面的0PX来控制图片显示的东西 0-1400之间图片一直在换高度 就蒙蔽你的眼睛让你看起来像动画
上面的图片就是你看到的背景图在切换
有了思路写起了很简单 就是想不到这个思路