Native JS implementation of rotation map
Because I always feel that things to be completed with the help of plug-ins always feel dependent on others. If I can't rely on them one day, I can't stand up anymore. So I don't want to do it with jQureey. I also saw JS given by many experienced bosses. Generally speaking, it can be realized, but if I completely copy it, there is no excessive effect. I simply added the transition effect and remade the structure, Similar to the fade in and fade out effect of Xiaomi, I made a rotation picture
Overall thinking
- Wrap all the pictures in a large box and stack them together for absolute positioning. Then each picture is directly hidden with opacity:0. The timer controls to change one picture every 2 seconds. opacity:1. We put this attribute into the. block class. The timer will give the next picture to the. block class every 2 seconds. Then, because the rotation is no longer required when the mouse passes, stop the timer, Restart the router when the mouse leaves
- A left button and a right button are required in the picture to control the left and right scrolling of the picture. For left and right classes, register click events to control the rotation of the picture,
- Generally, the rotation chart needs to tell the user how many pictures are in rotation, so you need to put some origin or long bar to let the user know at a glance how many pictures there are. Here is an origin, because it is orderly. Give an ol, and a few pictures will be a few li. Register the mouse passing event, and the mouse passing the first origin will add a. block to the first picture, After the second origin, add a. block to the pictures in Chapter 2. The structure is written in a large box, so you can also stop the timer by clicking the mouse into li
Layout structure
- The structure is as follows
<div id="loopDiv">
<!-- layer -->
<ol id='picol'>
<!-- Top picture -->
<li class="block"><img src="./images/0.jpg " width='100%'></li>
<!-- Put the hidden picture below -->
<li><img src="./images/1.jpg " width='100%'></li>
<li><img src="./images/2.jpg " width='100%'></li>
<li><img src="./images/3.jpg " width='100%'></li>
</ol>
<!-- The dot in the lower right corner can be used to change the picture directly through the mouse -->
<ol id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!-- Left button in the middle of the picture -->
<a href="javascript:;" class="blk">
<div id="left" class="chooseBut">
< </div>
</a>
<!-- Right button in the middle of the picture -->
<a href="javascript:;" class="blk">
<div id="right" class="chooseBut">></div>
</a>
</div>
CSS Style
- The style is as follows
<style>
li {
list-style: none;
}
#loopDiv {
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
#list {
list-style: none;
position: absolute;
bottom: 10px;
right: 25px;
}
#list li {
position: relative;
float: left;
width: 8px;
height: 8px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: #cddfec;
margin-right: 10px;
border-color: #aaa;
font-size: 0;
}
.chooseBut {
width: 50px;
height: 80px;
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 30px;
line-height: 80px;
text-align: center;
display: none;
}
#left {
position: absolute;
left: 0px;
top: 150px;
}
#right {
position: absolute;
right: 0px;
top: 150px;
}
.blk {
display: block;
}
#picol li {
float: left;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
}
.block {
/* Not enough weight, big dad */
opacity: 1 !important;
}
</style>
JS execution
- The code is as follows
<script type="text/javascript">
// Big box
var jsDivBox = document.getElementById("loopDiv");
//Get picture
var jsImg = document.getElementById("picol");
var pic = picol.querySelectorAll('li');
//Left and right button nodes
var jsLeft = document.getElementById("left");
var jsRight = document.getElementById("right");
//Get all li
var jsOl = document.getElementById("list");
var jsLis = jsOl.getElementsByTagName("li");
//Make the first dot gray
jsLis[0].style.backgroundColor = "#c2c2c2";
// Declaration picture subscript
var currentPage = 0;
//Start timer
var timer = setInterval(func, 2000);
function func() {
currentPage++;
changePic();
}
function changePic() {
// loop
if (currentPage == 4) {
currentPage = 0;
}
if (currentPage == -1) {
currentPage = 3;
}
//Replace picture
document.querySelector('.block').className = '';
pic[currentPage].className = 'block';
//Clear all dot colors
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor = "#aaa";
}
//Change the corresponding small circle point to gray
jsLis[currentPage].style.backgroundColor = "#8f8f8f";
}
//Mouse entry
jsDivBox.addEventListener("mouseover", func1, false);
function func1() {
//Stop Timer
clearInterval(timer);
//Show left and right buttons
jsLeft.style.display = "block";
jsRight.style.display = "block";
}
//Mouse out
jsDivBox.addEventListener("mouseout", func2, false);
function func2() {
//restart timer
timer = setInterval(func, 2000);
//Hide left and right buttons
jsLeft.style.display = "none";
jsRight.style.display = "none";
}
//Click the left and right buttons
jsLeft.addEventListener("click", func3, false);
jsRight.addEventListener("click", func, false);
function func3() {
currentPage--;
changePic();
}
// Change color when mouse passes over button
jsLeft.onmouseover = function () {
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
jsLeft.onmouseout = function () {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
jsRight.onmouseover = function () {
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
jsRight.onmouseout = function () {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
//Enter the dot
for (var j = 0; j < jsLis.length; j++) {
jsLis[j].onmouseover = function () {
currentPage = parseInt(this.innerHTML) - 1;
changePic();
};
}
</script>
last
- If the picture is too large and cannot float to a row, it seems that it can give the box a width of more than 100%, but it feels good to fade in and out, so there is no other effect