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組,乃至更多,如果不用函數,代碼量將大大增大,並且盡是重複代碼。合理使用函數,可以讓代碼的編寫更輕鬆,靈活。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章