Ultra-detailed rotation map, let you fully understand the rotation map!
When you first start learning JavaScript, many novices will try to write some simple small projects. Rotary diagrams should be the most written. But many times for the novice who is not very good at the foundation, although referring to other people's code can write some of the round-robin map, but some of the details and processes may still be half-understood or even do not understand. As a novice, I just wrote several common round-robin map, which also took a lot of time to understand the details. Here we introduce a simple, easy to understand and perfect way to write the rotation chart. I will elaborate on the details and hope to make progress with your new JavaScript buddies.
In fact, the idea of the rotation chart is very simple: using JavaScript to control the style of the rotation picture, can control display: none or block can control opacity:'0'or'1' can also control the order of the pictures through z-index. (Note: Pictures here are usually placed in a div box by absolute positioning and stacked together). The idea is clear, so let's take a look at the code (the code is written by myself). Specific details will be explained in the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 730px;
height: 454px;
margin: 100px auto;
position: relative;
}
#main .scollimg{
width: 730px;
height: 454px;
position: relative;
}
#main .scollimg img{
position: absolute;
top: 0;
left: 0;
}
#main .btn{
width: 730px;
height: 220px;
position: absolute;
top:117px;
left: 0;
}
#main .btn>div{
width: 100px;
height: 220px;
background: #fff;
opacity: 0;
}
#main .btn: hover>div{
opacity: 0.35;
}
#main .btn #btnleft{
position: absolute;
top: 0;
left: 0;
}
#main .btn #btnright{
position: absolute;
top: 0;
right:0;
}
/*Triangle in left and right button s*/
.triangle{
margin-top: 50px;
width: 0;
height: 0;
border-width:70px 40px;
border-style: solid;
}
#main .btn #btnleft .triangle{
border-color: transparent #ccc transparent transparent;
}
#main .btn #btnright .triangle{
margin-left: 20px;
border-color: transparent transparent transparent #ccc;
}
#main .item{
position: absolute;
bottom: 30px;
left: 70px;
width: 200px;
height: 16px;
}
#main .item span{
width: 16px;
height: 16px;
background: #ccc;
display: inline-block;
border-radius: 50%;
}
#main .item span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<div class="scollimg">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<div class="btn">
<div id="btnleft"><div class="triangle"></div></div>
<div id="btnright"><div class="triangle"></div></div>
</div>
<div class="item">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
window.οnlοad=function(){
autoMove('img','span');
}
//Rotary Graph Function
function autoMove(tagImg,tagSpan){
var imgs=document.getElementsByTagName(tagImg);
var spans=document.getElementsByTagName(tagSpan);
//Style after each rotation
/*Where to rotate, set the image style of which position. First, change all the image style opacity to 0, and then set opacity to 1.*/
function InitMove(index){
for(var i=0;i<imgs.length;i++){
imgs[i].style.opacity='0';
spans[i].style.background='#ccc';
}
imgs[index].style.opacity='1';
spans[index].style.background='red';
}
//First initialization
InitMove(0);
//Transform Function of Rotary Sowing Process
/*The initial effect of the image has been initialized, and then the first one will be hidden and the second one will appear if the broadcast is rotated.
*Here count starts at 1 (where the initial position of the picture is count 0), count=1 executes Init*Move(count) once, so that the first hidden second one appears and executes in turn. When count==imgs.leghth, because the last picture of * is imgs.length-1, count is set to zero at this time; it is equivalent to the rotation of the graph.
*Start again in turn.
*/
var count=1;
function fMove(){
if(count==imgs.length){
count=0;
}
InitMove(count);
count++;
}
//Setting up automatic rotation timer;
var scollMove=setInterval(fMove,2500);
//Click on the mobile picture;
/*Here is to click on the left-right button to move the picture according to the user's click; it needs to be noted that * every time you click on the left or right move, you need to clear the timer first, and when you move, if you add the timer again, the picture will change after you click on the move, but because the timer hasn't moved yet. Move to the top of the picture, so you need to wait for the timer to move to the top of the picture you moved to before starting the timing rotation. For example, if you start from the beginning
*Just click on the moving picture and move until the last one. Then you have to wait for two timers to see the automatic * rotation.
*/
var btnleft=document.getElementById('btnleft');
var btnright=document.getElementById('btnright');
btnleft.οnclick=function(){
clearInterval(scollMove);
if(count==0){
count=imgs.length;
}
count--;
InitMove(count);
scollMove=setInterval(fMove,2500);
};
btnright.οnclick=function(){
clearInterval(scollMove);
fMove();
scollMove=setInterval(fMove,2500);
}
}
</script>
</body>
</html>This is the most basic rotation map, the effect is basically no problem. Strong versatility.