转换思路

需求人员，会改html但是不会js, 但是页面的变化需要改动js, 

解决办法，把js的变动转变成html的变动

 

需求： 在ul中的li 轮训显示，div的背景色要随着轮播图片的变化而变化

<div  id="div">
<ul>
 <li  style="display:block"><img src="1.jpg"/></li>
 <li   style="display:none"><img src="2.jpg"/></li>
 <li   style="display:none"><img src="3.jpg"/></li>
</ul>
</div>

<script>

var arrs=[{img:"i.jpg":color:"red"},{img:"2.jpg",color:"green"},{img:"3.jpg",color:"blue"}];
<script>

 

问题： 对于轮播背景色的变化需要用一个数组存储颜色跟图片的对应关系，但是当改动轮播图片的时候这个数组需要跟随变动，对于一个一般人员，改动js的学习代价很高，并且，她们没法理解数组这样专业的数据结构容易出现问题

 

解决办法： 把颜色跟图片的对应关系转化js数组形式，转化为html中存储这种对应关系，这样学习成本就低很对，并且易于他们理解

<div  id="div">
<ul>
 <li  style="display:block" data-color="red"><img src="1.jpg"/></li>
 <li   style="display:none" data-color="green"><img src="2.jpg"/></li>
 <li   style="display:none" data-color="blue"><img src="3.jpg"/></li>
</ul>
</div>