|
| 1 | +<html lang="en"> |
| 2 | + |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>EasyCoder - image switcher</title> |
| 7 | +</head> |
| 8 | + |
| 9 | +<body> |
| 10 | +<div id="ex-imageswitcher"></div> |
| 11 | +<pre id="easycoder-script" style="display:none"> |
| 12 | +! Image Switcher |
| 13 | + |
| 14 | + script ImageSwitcher |
| 15 | + |
| 16 | + div Container |
| 17 | + div Buttons |
| 18 | + img Left |
| 19 | + img Right |
| 20 | + img Thumb |
| 21 | + img Image |
| 22 | + a Link |
| 23 | + variable ImageCount |
| 24 | + variable N |
| 25 | + variable M |
| 26 | + |
| 27 | + set the title to `Image Switcher` |
| 28 | + attach Container to `ex-imageswitcher` |
| 29 | + put 9 into ImageCount |
| 30 | + set the elements of Thumb to ImageCount |
| 31 | + set the elements of Image to ImageCount |
| 32 | + create Buttons in Container |
| 33 | + set the style of Buttons to `text-align:center; padding:10px;border:1px solid lightgray` |
| 34 | + create Link in Buttons |
| 35 | + create Left in Link |
| 36 | + set style `width` of Left to `60px` |
| 37 | + set attribute `src` of Left to `resources/icon/left.png` |
| 38 | + on click Left go to DoLeft |
| 39 | + put 0 into N |
| 40 | + while N is less than ImageCount |
| 41 | + begin |
| 42 | + index Thumb to N |
| 43 | + create Link in Buttons |
| 44 | + create Thumb in Link |
| 45 | + set style `width` of Thumb to `60px` |
| 46 | + set style `border` of Thumb to `1px solid white` |
| 47 | + if N is not 0 set style `margin-left` of Thumb to `10px` |
| 48 | + set attribute `src` of Thumb to `resources/img/imageswitcher/thumbs/img` cat N cat `.jpg` |
| 49 | + add 1 to N |
| 50 | + end |
| 51 | + on click Thumb go to DoThumb |
| 52 | + create Link in Buttons |
| 53 | + create Right in Link |
| 54 | + set style `width` of Right to `60px` |
| 55 | + set attribute `src` of Right to `resources/icon/right.png` |
| 56 | + on click Right go to DoRight |
| 57 | + put 0 into N |
| 58 | + while N is less than ImageCount |
| 59 | + begin |
| 60 | + index Image to N |
| 61 | + create Image in Container |
| 62 | + set the style of Image to `width:100%;display:none` |
| 63 | + set attribute `src` of Image to `resources/img/imageswitcher/img` cat N cat `.jpg` |
| 64 | + add 1 to N |
| 65 | + end |
| 66 | + put 0 into N |
| 67 | +Select: |
| 68 | + index Image to N |
| 69 | + index Thumb to N |
| 70 | + set style `display` of Image to `block` |
| 71 | + set style `border` of Thumb to `1px solid blue` |
| 72 | + stop |
| 73 | + |
| 74 | +DoLeft: |
| 75 | + set style `display` of Image to `none` |
| 76 | + set style `border` of Thumb to `1px solid white` |
| 77 | + put the index of Image into N |
| 78 | + if N is 0 put ImageCount into N |
| 79 | + take 1 from N |
| 80 | + go to Select |
| 81 | + |
| 82 | +DoRight: |
| 83 | + set style `display` of Image to `none` |
| 84 | + set style `border` of Thumb to `1px solid white` |
| 85 | + put the index of Image into N |
| 86 | + add 1 to N |
| 87 | + if N is ImageCount put 0 into N |
| 88 | + go to Select |
| 89 | + |
| 90 | +DoThumb: |
| 91 | + set style `display` of Image to `none` |
| 92 | + put the index of Thumb into N |
| 93 | + put the index of Image into M |
| 94 | + index Thumb to M |
| 95 | + set style `border` of Thumb to `1px solid white` |
| 96 | + index Thumb to N |
| 97 | + index Image to N |
| 98 | + go to Select |
| 99 | +</pre> |
| 100 | + <script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/dist/easycoder.js?v=2.6.0'></script> |
| 101 | + |
| 102 | + </body> |
| 103 | +</html> |
0 commit comments