這篇文章主要介紹了js實現非常簡單的焦點圖切換特效,是一個非常簡單的js焦點圖切換效果,涉及javascript操作鼠標事件與圖片的相關技巧,需要的朋友可以參考下
這是一個非常非常簡單的焦點圖(更像滑動門)，可供初學者借鑒參考
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> * {margin:0;padding:0;} ul, li {list-style:none;} .mid {margin:0 auto;} .area { width:240px;height:270px; overflow:hidden;background:#999; margin-top:150px;position:relative; } #pic_list { position:relative; } #pic_list li { position:absolute;visibility:hidden; } #pic_list li.show { visibility:visible; } #pic_list li img { vertical-align:middle; } .button { width:240px;height:20px; line-height:20px;background:#ccc; position:absolute;bottom:0px; } #button { float:right; } #button li { float:left;width:20px;height:20px; text-align:center;margin:0 3px; font-family:"Arial";font-size:12px; color:#fff;background:#000; } #button li.current { background:#f00;cursor:pointer; } </style> </head> <body> <div class="area mid"> <div id="imgbox" class="bbbb"> <ul id="pic_list" class="aaaa"> <li class="show" id="one"> <img src="images/1317279971_77011100.jpg" width="240" /> </li> <li id="two"> <img src="images/1317279972_01691900.jpg" width="240" /> </li> <li id="three"> <img src="images/1317279973_69082200.jpg" width="240" /> </li> <li id="four"> <img src="images/1317281054_38572100.jpg" width="240" /> </li> <li id="five"> <img src="images/1317281056_61630800.jpg" width="240" /> </li> </ul> </div> <div class="button" class="dddd"> <ul id="button" class="cccc"> <li class="current" id="but_one">1</li> <li id="but_two">2</li> <li id="but_three">3</li> <li id="but_four">4</li> <li id="but_five">5</li> </ul> </div> </div> <script type="text/javascript"> (function(){ var imgbox = document.getElementById("imgbox"); var pic_list = document.getElementById("pic_list"); var pics = pic_list.getElementsByTagName("li"); var button = document.getElementById("button").getElementsByTagName("li"); var p; var start; function autoplay(start){for(i=start;i<button.length;i++){ //設置起始值為start參數. (function(){ var p=i; // 為p賦值i. i等於0,1,2,3,4; button[i].onmouseover=function change(){ //button[0],button[1],button[2],button[3],button[4] //onmouseover可以觸發函數; for(j=0;j<this.parentNode.childNodes.length;j++){ //以this(當前觸發事件的元素)為起點,的父節點的所有子節點 //的length值為最高值,開始遍歷. ; this.parentNode.childNodes[j].className=""; //以this(當前觸發事件的元素)為起點 //的父節點的所有子節點的className為空. 危險慎用.; } this.className="current"; //this. 即當前觸發onmouseover的元素的className為"current"; for(m=0;m<pics.length;m++){ //以pics.length為最高值進行遍歷.遍歷pics.; pics[m].className=""; //清空所有pics數組中所有元素的className; if (m==p){ //當m==p (p==i) 所以m=i時,觸發下列函數 pics[m].className="show"; //pics的第m個元素的className值為show; m在這裡等於i; } } } })(); } } autoplay(0); })(); </script> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。
注< >：更多精彩教程請關注編程