preface
This is also a suitable for JavaScript beginners to practice, with the basic knowledge of JavaScript to write a wheel cast graph, in fact, there are many ways to achieve the wheel cast graph, such as using some framework, Bootstrap, or CSS3 can easily make beautiful wheel cast graph, This time to use JavaScript, mainly in order to exercise their ability to use Js, the code is very simple, I will first release HTML and CSS part, and finally explain Js part in detail, or that sentence, the important thing is thinking, I hope Js beginners can follow me to start knocking, absolutely on their ability to improve! The full code is also posted on GitHub, with a link at the end.
HTML code section
<div class="main_div">
<div class="arrows">
<span title="1" class="arrow"><</span>
<span title="0" class="arrow" style="float: right">></span>
</div>
<ul class="ul_img">
<li class="li_img">! [](Images/Photo net - water drops on bamboo leaves. JPG)</li>
<li class="li_img">! [](Images/Photo net - People at the seaside. JPG)</li>
<li class="li_img">! [](Images/Photo net - Cool lotus leaves.jpg)</li>
<li class="li_img">! [](Images/Photo net - Endless mountains.jpg)</li>
</ul>
</div>
<div style="margin-left: 600px">
<div class="div_btn"></div>
<div class="div_btn"></div>
<div class="div_btn"></div>
<div class="div_btn"></div>
</div>Copy the codeThe whole HTML is very simple, divided into three parts, the first part is the four images, the second part is the left and right arrow keys, the third part is the four rounded rectangles at the bottom, nothing to say, to simplify the code, is the simplest.
CSS code section
<style>
img {
width: 100%;
}
.li_img {
width: 800px;
float: left;
list-style: none;
}
.ul_img {
width: 6000px;
padding: 0px;
margin: 0px;
transition: all 2s;
}
.main_div {
width: 800px;
overflow: hidden;
position: relative;
top: 100px;
left: 350px;
}
.arrows {
z-index: 9999;
position: absolute;
padding-top: 230px;
width: 800px;
}
.arrows span {
font-size: 3em;
color: seashell;
}
.arrows span:hover {
/* Change hands */
cursor: pointer;
background-color: rgba(192, 192, 192, 0.29);
}
.div_btn {
float: left;
border-radius: 100px;
background-color: aquamarine;
width: 60px;
height: 10px;
margin-left: 10px;
margin-top: 130px;
}
.div_btn:hover {
background-color: aqua;
}
</style>Copy the codeCSS part is also as simple as possible, not too fancy style Settings, arbitrary Settings, you can play, mainly for writing JavaScript…… The only thing to notice is that I’ve set a transition for.li_img. Since the width and height are set with fixed pixels, different browsers may display different styles, but it does not affect the function. Here, I use Chrome and Firefox for debugging
JavaScript part
Please don’t look directly at this part of the code, first look at my ideas and then look at this part, you will be absolutely easy to understand
<script>
// The number of runs
var count = 0;
// Direction of animation execution
var isgo = false;
// Define a timer object
var timer;
window.onload = function () {
/* Get ul element */
var ul_img = document.getElementsByClassName("ul_img") [0];
// Get all the li image elements
var li_img = document.getElementsByClassName("li_img");
// Get the arrow element that controls the direction
var arrow = document.getElementsByClassName("arrow");
// Get all button elements
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
/* Define timer to control image movement */
showtime();
function showtime() {
timer = setInterval(function () {
if (isgo == false) {
count++;
ul_img.style.transform = "translate(" + - 800. * count + "px)";
if (count >= li_img.length - 1) {
count = li_img.length - 1;
isgo = true; }}else {
count--;
ul_img.style.transform = "translate(" + - 800. * count + "px)";
if (count <= 0) {
count = 0;
isgo = false; }}for (var i = 0; i < div_btn.length; i++) {
div_btn[i].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua";
}, 4000)}/* Enter the left and right arrow keys */
for (var i = 0; i < arrow.length; i++) {
// When the mouse is hovering
arrow[i].onmouseover = function () {
// Stop the timer
clearInterval(timer);
}
// Mouse away
arrow[i].onmouseout = function () {
// Add a timer
showtime();
}
arrow[i].onclick = function () {
// Distinguish between left and right
if (this.title == 0) {
count++;
if (count > 3) {
count = 0; }}else {
count--;
if (count < 0) {
count = 3;
}
}
ul_img.style.transform = "translate(" + - 800. * count + "px)";
for (var i = 0; i < div_btn.length; i++) {
div_btn[i].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua"; }}// Hover over the bottom button
for (var b = 0; b < div_btn.length; b++) {
div_btn[b].index = b;
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a < div_btn.length; a++) {
div_btn[a].style.backgroundColor = "aquamarine";
}
div_btn[this.index].style.backgroundColor = "aqua";
// make count correspond
// To control the direction
if (this.index == 3) {
isgo = true;
}
if (this.index == 0) {
isgo = false;
}
count = this.index;
ul_img.style.transform = "translate(" + - 800. * this.index + "px)";
}
div_btn[b].onmouseout = function () {
// Add a timershowtime(); }}}</script>Copy the codeTrain of thought,
First of all, when thinking about how to realize the wheel cast map, please consider what kind of functions to set for the wheel cast map, I set three functions:
-
Pictures can be automatically right rotation, rotation to the last picture, reverse rotation to the left, the cycle repeated
-
You can use the left and right direction keys to control the picture rotation direction
-
You can use the rounded rectangle below to select an image to browse
After the clear function, the next solution is not on the line, ok, let’s look at the first problem, how to realize the picture can automatically right rotation, rotation to the last picture, reverse rotation to the left, repeated? That’s right, it’s easy to use timers setTimeout() or setInterval(), so I’m going to use setInterval() here, if you’re not sure how to use setInterval() here. Ok, here’s the code idea for the first part of the function:
-
The first function
Showtime () = showtime(); showtime() = showtime(); showtime() = showtime()
Well, can’t write directly, of course, first you have to think, now that the pictures at first wheel to the right, you must first set a direction, then consider, still have to set the number of a running, such as the initial position of the first picture, I want to run to the right three times, can reach the fourth picture, then set a timer object, use will be said, These must be global variables, so they must be declared at the beginning:
// The number of runs
var count = 0;
// Direction of animation execution
var isgo = false;
// Define a timer object
var timer;Copy the codeThen you can write, of course, first get the image element:
/* Get ul element */
var ul_img = document.getElementsByClassName("ul_img") [0];
// Get all the li image elements
var li_img = document.getElementsByClassName("li_img");Copy the codeOk, this is the end of the preparation work, the principle of image rotation is that the images line up, and then prepare a container that is only the size of one image, set the container to be beyond partial hiding, and control the timer to make the images move left or right as a whole, so that the effect is the image in rotation. Function showtime() and add a timer to it in preparation for controlling image rotation:
function showtime(a) {
timer = setInterval(function (a){},4000);
}Copy the codeAbove, I defined a delay of 4000 milliseconds (4 seconds) to execute the anonymous function(){} in setInterval() once, to keep the rotation effect as slow as possible. Then I add the following three lines to the anonymous function function(){} :
function showtime(a) {
timer = setInterval(function (a){
if (isgo == false) {
count++;
ul_img.style.transform = "translate(" + - 800. * count + "px)"; }},4000);
}Copy the codeRemember earlier when we declared the isgo global variable and assigned it a Boolean value false? The if statement will increment count by one and set the style for the UL_img image, moving the ul_img image 800px to the left (because the CSS set width to 800px). So the above statement will collective control image to the left into the distance of 800 px, let the second image to display in the container, and (before this DiErSanSi images are hidden, because I set up more than partially hidden), so this time round of state is the second image of the figure shows that hidden DiYiSanSi images, then every 4 seconds will repeat the above process, And then there’s the rotation… ?
Soon you’ll notice that when you move to the left three times (count = 3), you’ll get the fourth image, which is fine, but after 4 seconds, you’ll notice that the image moves further to the left (count = 4). Damn it! No figure! What can I do to solve this problem? Hin simple! Add an if statement.
function showtime(a) {
timer = setInterval(function (a){
if (isgo == false) {
count++;
ul_img.style.transform = "translate(" + - 800. * count + "px)";
if (count >= li_img.length - 1) {
count = li_img.length - 1;
isgo = true; }}},4000);
}Copy the codeIf li.img.length-1 is greater than or equal to li.img.length-1, add an else statement to describe the case where isgo=true:
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
count+ +; ul_img.style.transform ="translate(" + - 800. * count + "px)";
if (count >= li_img.length - 1) {
count = li_img.length - 1;
isgo = true;
}
else {
count-;
ul_img.style.transform = "translate(" + - 800. * count + "px)";
if (count< =0) {
count = 0;
isgo = false; }}},4000); } showtime ();Copy the codeIf count <= 0, set isgo to false, repeat the loop, and then call showtime().
-
Second function
The second function we will add the mouse into the left and right arrow keys operation, first get the left and right arrow keys.
// Get the arrow element that controls the direction
var arrow = document.getElementsByClassName("arrow");Copy the codeWell, since there are two arrow keys, we’ll use a for loop to bind events to them:
for (var i = 0; i < arrow.length; i++) {
// When the mouse is hovering
arrow[i].onmouseover = function (a) {
// Stop the timer
clearInterval(timer);
}
// Mouse away
arrow[i].onmouseout = function (a) {
// Add a timershowtime(); }}Copy the codeWe use clearInteral() to terminate the timer when we hover. This is why we declared the timer as a global variable earlier, so that we can stop the timer when we want to. Next we add an onclick event to the arrow keys so that we can control the direction:
for (var i = 0; i < arrow.length; i++) {
// When the mouse is hovering
arrow[i].onmouseover = function (a) {
// Stop the timer
clearInterval(timer);
}
// Mouse away
arrow[i].onmouseout = function (a) {
// Add a timer
showtime();
}
arrow[i].onclick = function (a) {
// Distinguish between left and right
if (this.title == 0) {
count++;
if (count > 3) {
count = 0; }}else {
count--;
if (count < 0) {
count = 3;
}
}
ul_img.style.transform = "translate(" + - 800. * count + "px)"; }}Copy the codeI don’t know if you noticed, but I set the title value for the left and right arrow keys in the HTML: 0 and 1; So I’m just going to use the title value to distinguish between left and right, the right arrow key and we’ll do count++; For the left arrow key we call count–; We also take into account count>3 and count<0, which I mentioned before and I won’t repeat here, so we’ve done the second part of the function, which is pretty simple
-
Third function
In the same way that we hover over the bottom rounded rectangle, we get four rounded rectangles and bind them with a for loop:
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
// Hover over the bottom button
for (var b = 0; b < div_btn.length; b++) {
div_btn[b].index = b;
div_btn[b].onmouseover = function () {}
div_btn[b].onmouseout = function () {}}Copy the codeDiv_btn [b].index = b; What does this statement do? In this case, there’s a hole in loop binding, and I want you to read this article about binding events in a for loop and printing variable I is the last time
Ok, let’s write the hover event first:
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a < div_btn.length; a++) {
div_btn[a].style.backgroundColor = "aquamarine";
}
div_btn[this.index].style.backgroundColor = "aqua";
// To control the direction
if (this.index= =3) {
isgo = true;
}
if (this.index= =0) {
isgo = false;
}
// make count correspond
count = this.index;
ul_img.style.transform = "translate(" + - 800. * this.index + "px)"; }}Copy the codeSo with that foundation, it should be a little bit easier for you to understand when I’m talking about mouse hover events, so I’m going to use clearInterval(timer) for mouse hover events; After that, I assign the current index attribute value to count so that the user can choose which image to view by hovering over the bottom rounded rectangle.
Finally, add the mouse away event:
div_btn[b].onmouseout = function (a) {
// Add a timershowtime(); }}Copy the codeDone!! So that’s all the functionality. In fact, the last step is:
for (var a = 0; a < div_btn.length; a++) {
div_btn[a].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua";
}Copy the codeAdd the above code to function 1 and function 2 so that the bottom rounded rectangle can change color when the image automatically rotates and controls the left and right arrow keys. Here is the source code, on Github: github.com/Joe19970619…
Here’s the full JS code:
<script>
var count = 0;
var isgo = false;
var timer;
window.onload = function () {
var ul_img = document.getElementsByClassName("ul_img") [0];
var li_img = document.getElementsByClassName("li_img");
var arrow = document.getElementsByClassName("arrow");
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
showtime();
function showtime() {
timer = setInterval(function () {
if (isgo == false) {
count++;
ul_img.style.transform = "translate(" + - 800. * count + "px)";
if (count >= li_img.length - 1) {
count = li_img.length - 1;
isgo = true; }}else {
count--;
ul_img.style.transform = "translate(" + - 800. * count + "px)";
if (count <= 0) {
count = 0;
isgo = false; }}for (var i = 0; i < div_btn.length; i++) {
div_btn[i].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua";
}, 4000)}for (var i = 0; i < arrow.length; i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
}
arrow[i].onmouseout = function () {
showtime();
}
arrow[i].onclick = function () {
if (this.title == 0) {
count++;
if (count > 3) {
count = 0; }}else {
count--;
if (count < 0) {
count = 3;
}
}
ul_img.style.transform = "translate(" + - 800. * count + "px)";
for (var i = 0; i < div_btn.length; i++) {
div_btn[i].style.backgroundColor = "aquamarine";
}
div_btn[count].style.backgroundColor = "aqua"; }}for (var b = 0; b < div_btn.length; b++) {
div_btn[b].index = b;
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a < div_btn.length; a++) {
div_btn[a].style.backgroundColor = "aquamarine";
}
div_btn[this.index].style.backgroundColor = "aqua";
if (this.index == 3) {
isgo = true;
}
if (this.index == 0) {
isgo = false;
}
count = this.index;
ul_img.style.transform = "translate(" + - 800. * this.index + "px)";
}
div_btn[b].onmouseout = function () { showtime(); }}}</script>Copy the code