JS函数之多组图片切换

函数传递参数：参数=JS的数据类型。

遵循的原则：1.尽量保证HTML代码结构一致，可以通过父元素获取子元素；2.把核心主程序通过函数包起来；3.把魅族不同的值找出来，通过传参实现。

以下为多组图片切换的实例。

以上为效果图。左图是通过点击右边方框，实现切换图像。右图是通过鼠标移动到相应方框，来实现切图。

我是通过先做出左图的效果，然后再调整修改做出二图。

1）这是HTML部分，其中效果图上的右方框是通过列表实现的，只是列表将通过JS来实现。

2）下图是HTML部分，因为两个div内的样式相同。所以给其添加一个class，减少代码的重复量。

3）先分析只有一组图片切换的JS的写法：

     3.1先获取元素 。

   3.2声明两个数组，存放图片的地址，以及文字说明。

     3.3插入li列表

     3.4初始化，使页面呈现第一页的效果图。

  

      3.5主函数如下：通过添加索引值来实现一一匹配关系；同时，下面的for循环是清楚右侧方框点击的效果，实现只点击当次方框。方框的背景色变换回。

     以上为一组图片切换的代码。如果换成两组图片切换，比较参照两组图片的不同之处，来写出相对应的代码；

 4）通过比较得出：两组图片的div有不同的id，图片的文字说明，以及数量也不同。并且事件也不同，左图是onclick,右图是onmouseover，但是在写代码的时候，可以通过先写主函数，然后再看函数中有哪些传递参数。

     4.1 因为已经比较得出，函数的传递参数为以下：

     4.2以下为获取元素：可以看书，只有在获取div元素的时候与之前有了变化，因为这边涉及到一个传参。

     4.3获取li

     4.4以函数的形式将初始化表现出了来，方便待会写主函数直接调用。当然也可以将3.4的内容用函数的形式表现。

     4.5传参evt为两组图片的不同事件表现。

    

总结：通过函数，大大地减少了代码的重复量，如果不用函数，相当于3的内容要写上两遍，如果超过了2组图片，有3组，乃至更多，如果不用函数，代码量将大大增大，并且尽是重复代码。合理使用函数，可以让代码的编写更轻松，灵活。