1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Rotation chart</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .banner { 13 width: 100%; 14 height: 450px; 15 background: #999; 16 position: relative; 17 } 18 19 .cont { 20 width: 100%; 21 height: 100%; 22 line-height: 450px; 23 text-align: center; 24 display: none; 25 color: #f00; 26 } 27 28 .tip { 29 width: 120px; 30 bottom: 50px; 31 left: 50%; 32 margin-left: -60px; 33 position: absolute; 34 } 35 36 .tip ul { 37 width: 120px; 38 margin: 0 auto; 39 text-align: center; 40 } 41 42 .tip ul li { 43 margin: 0; 44 width: 20px; 45 height: 20px; 46 text-align: center; 47 line-height: 20px; 48 background: #ccc; 49 margin: 0 5px; 50 list-style: none; 51 display: inline-block; 52 } 53 54 .active { 55 color: #fff; 56 background: #f00 !important; 57 } 58 59 .pre, .next { 60 position: absolute; 61 top: 50%; 62 margin-top: -50px; 63 width: 40px; 64 height: 80px; 65 line-height: 80px; 66 text-align: center; 67 background: #ccc; 68 } 69 70 .pre { 71 left: 0; 72 } 73 74 .next { 75 right: 0; 76 } 77 </style> 78 </head> 79 <body> 80 <div class="banner" id="box"> 81 <div class="main" id="main"> 82 <div class="cont" style="display: block">First chapter</div> 83 <div class="cont" style="background:#666">Second sheets</div> 84 <div class="cont" style="background:#171717">Third sheets</div> 85 <div class="cont" style="background:#424242">Fourth sheets</div> 86 </div> 87 <div class="tip" id="tip"> 88 <ul> 89 <li class="active">1</li> 90 <li>2</li> 91 <li>3</li> 92 <li>4</li> 93 </ul> 94 </div> 95 <div class="slide"> 96 <div class="pre" id="pre">Left</div> 97 <div class="next" id="next">right</div> 98 </div> 99 </div> 100 </body> 101 <script> 102 window.onload = function () { 103 var oCont = document.getElementsByClassName('cont'); 104 var oLi = document.getElementsByTagName('li'); 105 var oPre = document.getElementById('pre'); 106 var oNext = document.getElementById('next'); 107 108 var index = 0; 109 var timer = ''; 110 111 //Left handover 112 oPre.onclick = function () { 113 index--; 114 if (index == '-1') { 115 index = oCont.length - 1; 116 } 117 ; 118 119 for (var i = 0; i < oCont.length; i++) { 120 oLi[i].className = ''; 121 oCont[i].style.display = 'none' 122 } 123 oLi[index].className = 'active'; 124 oCont[index].style.display = 'block'; 125 }; 126 127 //Handover on the right 128 oNext.onclick = function () { 129 130 index++; 131 if (index == oCont.length) { 132 index = 0; 133 } 134 for (var i = 0; i < oCont.length; i++) { 135 oLi[i].className = ''; 136 oCont[i].style.display = 'none' 137 } 138 oLi[index].className = 'active'; 139 oCont[index].style.display = 'block'; 140 }; 141 142 143 //Click digital to switch content 144 for (var i = 0; i < oLi.length; i++) { 145 oLi[i].index = i; 146 oLi[i].onclick = function () { 147 for (var i = 0; i < oLi.length; i++) { 148 oLi[i].className = ''; 149 oCont[i].style.display = 'none'; 150 } 151 for (var i = 0; i <= this.index; i++) { 152 this.className = 'active'; 153 oCont[this.index].style.display = 'block'; 154 index = i; 155 } 156 } 157 } 158 159 160 timer = setInterval(move, 1500); 161 162 box.onmouseout = function () { 163 clearInterval(timer); 164 timer = setInterval(move, 1500); 165 }; 166 167 box.onmouseover = function () { 168 clearInterval(timer); 169 }; 170 171 function move() { 172 index++; 173 if (index == oCont.length) { 174 index = 0; 175 } 176 for (var i = 0; i < oCont.length; i++) { 177 oLi[i].className = ''; 178 oCont[i].style.display = 'none' 179 } 180 oLi[index].className = 'active'; 181 oCont[index].style.display = 'block'; 182 } 183 184 }; 185 </script> 186 187 </html>
The general principle of the rotation chart is to judge which picture in the picture array should be displayed currently through JS.
Obtain the image (. cont) to be displayed as an array through JS, and judge which page of pager the user is currently clicking, or click the page cutting button.
Then add the display:block attribute to the currently active picture and hide the other pictures (display:none).
Add a class="active" attribute to the pager's current page number to identify the currently active page number.
And finally add a circulator (setInterval) to rotate the page, and finally complete the effect of the rotation chart.
Note: you can add the effect of rotation.