This article mainly introduces the JS implementation of a very simple focus diagram switching effect, is a very simple JS focus diagram Switching effects, involving JavaScript operation mouse events and pictures related skills, the need for friends can refer to the
This is a very very simple focus (more like a sliding door) for beginners to reference
?
| 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 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 5, 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 11 9 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> Untitled document </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:vi sible; #pic_list li img {vertical-align:middle; button {width:240px;height:20px; Line-height:20px;background: #ccc; positi on: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= "" "/> </li> <li Id= "three" > <img src= "images/1317279973_69082200.jpg" width= ""/> "<li" </li> id= four "> <img" "Images/1317281054_38572100.jpg" width= "src="/> </li> <li id= "Five" > <img src= "images/" 1317281056_61630800.jpg "width="/> </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++) {//Set starting value to start parameter. (function () {var p=i;//P Assignment I equals 0,1,2,3,4 button[i].onmouseover=function change () {//button[0],button[1],button[2] , Button[3],button[4]//onmouseover can trigger a function; for (j=0;j<this.parentnode.childnodes.length;j++) {//The length value of all child nodes//of the parent node with this (the element that currently triggers the event) is the highest value, begin traversal.; This.parentnode.childnodes[j].classname= ""; The classname of all child nodes of the parent node with this (the element that currently triggers the event) is null. Danger is used with caution.; } this.classname= "Current"; This. The classname of the element that is currently triggering the onmouseover is "current"; for (m=0;m<pics.length;m++) {//The pics.length is traversed as the highest value. Traverse pics.; pics[m].classname= "";//empty pics All elements in className array; if (m==p) {//when m==p (p==i) so m=i, the following function is triggered pics[m].classname= "show"; the class of the first M element of//picsThe name value is show; m here equals I; } } } })(); } autoplay (0); })(); </script> </body> </html> |
I hope this article will help you with your JavaScript programming.
Note < > : More Wonderful tutorials please focus on Triple programming
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
