These days, which app, which applet doesn't have a wheel map, and duck, which ui framework doesn't provide you with it.
But do you know how to write the original broadcasting chart. so, let's first understand the technical points of rotograms
1. Use timer to switch picture rotation effect
2. Stop switching pictures when the mouse is over the pictures, and continue switching pictures after leaving
3. When the picture clicks the previous one and the next one, it will switch automatically and judge whether it is the first or the last one.
When the picture is the first one, click the previous one to the last one. When the picture is the last one, click the next one to the first one.
HTML structure (no aesthetic HTML, after all, just a demo)
<body> <div style="float: left;width: 15%;"> <span onclick="left()">Last one</span> </div> <div style="float: left;width: 60%;height: 450px;" onmouseover="stop()" onmouseout="start()"> <img style="width: 500px;height: 450px;" src="img/1.jpg" /> </div> <div> <span onclick="right()">Next piece</span> </div> </body>
JavaScript code
/* * 1.Use timer to switch picture rotation effect * 2.Stop switching pictures when the mouse is over the pictures, and continue switching pictures after leaving * 3.When the picture clicks the previous one and the next one, it will switch automatically and judge whether it is the first or the last one. * When the picture is the first one, click the previous one to the last one. When the picture is the last one, click the next one to the first one. * * onmouseover Event occurs when the mouse pointer moves over the specified object. * onmouseout Event occurs when the mouse pointer moves out of the specified object. * */ // Put all picture URLs into an array, and set the index value to 0 var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg"]; var index = 0; var stopValue = 0; var startValue = 0; var img = document.getElementsByTagName("img")[0]; // Get dom of img function carousel() { // Switch pictures if (index < imgs.length-1) { index++; img.setAttribute("src", imgs[index]); } else{ index = 0; img.setAttribute("src", imgs[index]); } } /* * Two global variables, stopValue and startValue, are defined as 0, * onmouseover And onmouseout will execute many times from entering the corresponding element range to leaving the corresponding element range, * Through two global global variables, it can only execute once no matter how it moves within the corresponding element range, * Avoid setInterval time errors. * */ function stop(){ // Stop carousel when entering picture stopValue+=1; if (stopValue < 2) { clear(); startValue = 0; } } function start(){ // Continue the rotation when leaving the picture startValue+=1; if (startValue < 2) { setInt(); stopValue = 0; } } function clear(){ // Clear timer clearInterval(int); } function setInt(){ // Rerun timer int = setInterval("carousel()", 3000); } /* * The shop() and start() methods are also called when switching pictures * In order to eliminate the problem of switching pictures in the process of broadcasting, when you are about to switch pictures, you can switch pictures manually and enter the next picture immediately * */ function left(){ // Previous switch picture stop(); if (index > 0) { index -= 1; img.setAttribute("src", imgs[index]); } else{ index = imgs.length-1; img.setAttribute("src", imgs[index]); } start(); } function right(){ // Next toggle picture stop(); if (index < imgs.length-1) { index +=1; img.setAttribute("src", imgs[index]); } else{ index = 0; img.setAttribute("src", imgs[index]); } start(); } var int = setInterval("carousel()", 3000);
Oh, by the way, this article refers to this big one Article , hee hee should admit it or admit it. Who makes me a child
It seems that this is not far from the practical effect of rotation, but there must be many shortcomings. I hope you can point out that~~~
Oh, my God, maybe adding a css transition effect will be a lot easier, but who let me css dregs? Let's go to study first~~~
