原生js实现循环精灵图

案例分析:1精灵图是竖着排列的

                2.利用for循环，修改精灵图的背景位置 background-position

                精灵图的y坐标 索引号*间隔的距离

<script>
    var list = document.querselecterAll('li')
    for(var i = 0 ; i<list.length ; i++){
        //让索引号 × 图片距离的位置 就是每个精灵图的背景坐标
        var index = i * 44 
        list[i].style.backgroundPosition = '0 -' + index + 'px'
    }
</script>

分析 首先精灵图的图片是有规律的

第一步：获取所有的li节点 用querselecterAll()获取到的是一个伪数组

第二步：测量每个精灵图的间隔大小

第三步：修改样式list[i].style.backgroundPosition = 'x坐标  y坐标'