Today our own handwriting a fade fade version of the wheel broadcast map, first effect map 👇
Because the file is too large, can only be compressed into so that we see 😓
Since cannot spread big file, that everybody grievance listens to small sesame first to describe specific demand 😄
A, requirements,
❝
1. Realize the effect of fading and fading in automatic rotation;
❞
As in the above renderings;
❝
2, mouse on:
- Display left and right toggle arrows
- Stop automatic rotation;
❞
Figure: at this time the small sesame mouse on the figure, so display left and right arrows, and no longer automatic rotation
❝
3, mouse away:
- Hide the left and right toggle arrows
- Continue automatic rotation;
❞
Consistent with the effect drawing of 👆
❝
4. Click the left and right arrows to switch pictures up and down
❞
As shown in figure:
❝
5. Click the pager to jump to the corresponding image
❞
Picture: Little Sesame click the third pager, nami comes out 😄
Well, now that the demand has been met, it’s time to start our show
Two, code implementation
HTML
In the structure we need:
- Pictures of the container
- Here small sesame put 6 pictures really a bit much, but see which one are reluctant to delete 😭 so looking at some chaos;
- Friends can adjust according to their own needs
- Pager container
- Left and right button container
Can be
<html>
<head>
<meta charset="UTF-8">
<title>Golden little Sesame - Fade fade version of the wheel - native</title>
<! -- IMPORT CSS -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<! -- Multicast container -->
<div class="container">
<! -- WRAPPER to hold all images -->
<div class="wrapper">
<! -- SLIDER each SLIDER -->
<div class="slider">
<img src="images/banner1.jpg" alt="">
</div>
<div class="slider">
<img src="images/banner2.jpg" alt="">
</div>
<div class="slider">
<img src="images/banner3.jpeg" alt="">
</div>
<div class="slider">
<img src="images/banner4.jpeg" alt="">
</div>
<div class="slider">
<img src="images/banner5.jpeg" alt="">
</div>
<div class="slider">
<img src="images/banner6.jpg" alt="">
</div>
</div>
<! -- PAGENATION -->
<ul class="pagination">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<! -- Left and right buttons -->
<a href="javascript:;" class="arrow changeLeft"></a>
<a href="javascript:;" class="arrow changeRight"></a>
</div>
<! -- IMPORT JS -->
<script src="js/index.js"></script>
</body>
</html>
Copy the codeNow it looks like this:
CSS
Style here small partners can according to their own needs and aesthetic creation 😄
Small sesame’s aesthetic is limited, it is good to simply complete the demand 😜
.container {
position: relative;
margin: 50px auto;
width: 800px;
height: 400px;
overflow: hidden;
}
.container .wrapper {
position: relative;
width: 100%;
height: 100%;
}
.container .wrapper .slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
opacity: 0;
transition: all .3s;
}
/* Displays the first image */
.container .wrapper .slider:nth-child(1) {
opacity: 1;
z-index: 1;
}
.container .wrapper .slider img {
width: 100%;
height: 100%;
}
/* Pager */
.pagination {
position: absolute;
z-index: 999;
bottom: 10px;
left: 50%;
transform: translateX(50%);
padding: 5px 10px;
font-size: 0;
border-radius: 26px;
}
.pagination li {
display: inline-block;
margin: 0 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.pagination li.active {
background: red;
}
/* Left and right buttons */
.arrow {
display: none;
position: absolute;
z-index: 999;
top: 50%;
margin-top: -22.5 px.;
width: 30px;
height: 45px;
background: url(.. /images/pre.png) no-repeat0 0;
}
.arrow.changeLeft {
left: 0;
}
.arrow.changeRight {
right: 0;
background-position: -50px 0;
}
.container:hover .arrow {
display: block;
}
Copy the codeLeft and right switch button, small sesame is inserted in the way of background picture, provided here
Now let’s have a preview
It’s done, so let’s go ahead and implement the interaction
JS interaction
Before we do requirements, we need to get all the elements we are going to manipulate;
// Get the element to operate on
// The outermost container of the multicast diagram
let container = document.querySelector('.container'),
// The container that wraps all images
wrapper = container.querySelector('.wrapper'),
// A collection of all images
sliderList = wrapper.querySelectorAll('.slider'),
// The pager container
pagination = container.querySelector('.pagination'),
// Set of Li tags for each pager
paginationList = pagination.querySelectorAll('li'),
// Left button
changeLeft = container.querySelector('.changeLeft'),
// Right button
changeRight = container.querySelector('.changeRight');
Copy the codeThe elements are all retrieved and we go step by step as required;
Requirement 1: realize the effect of fade in and fade out automatic rotation
Thought analysis
❝
Fade in and out: Change z-index and opacity of the corresponding image
- Whichever picture you want to show, let it show
z-indexandopacityfor1;- While making other pictures
z-indexandopacityfor0Can;Automatic rotation effect: use timer
❞
Let’s implement the code first:
Code implementation
// Set the timer and switch time
let autoTimer = null.
interval = 3000.
prev = 0.
step = 0;
// Because it will be used later, there is a function wrapper around the effect of the switch
// Switch function encapsulation
let change = function change() {
// leave the previous one undisplayed
sliderList[prev].style.zIndex = '0';
sliderList[prev].style.opacity = '0';
// Let the current sheet transition to display
sliderList[step].style.zIndex = '1';
sliderList[step].style.opacity = '1';
sliderList[step].style.transition = 'opacity .5s';
// The pager function is added after the pager function is written.
// Automatically toggle with the focus on it
focus();
}
// Implement automatic switching
let autoMove = function autoMove() {
// prev saves the index of the previous table
prev = step;
// step represents the one to be displayed
step++;
// If step is greater than the image, reset step to 0
step >= sliderList.length ? step = 0 : null;
// Perform the switch
change();
};
// Use the timer to complete the automatic switch
autoTimer = setInterval(autoMove, interval);
Copy the codeAt this point we can open the browser can see, has been able to achieve the effect of fade in 😄
If you’re careful, you’ll notice: Gee, why doesn’t the pager move with you?
Don’t worry, we will implement 😄 now
❝
Implement pager and picture correspondence
❞
// Pager autofocus
let focus = function focus() {
[].forEach.call(paginationList, (item, index) => {
step === index ? item.className = 'active' : item.className = ' ';
})
};
Copy the codeNow that the function is written, where do we execute it?
We want the pager to follow the image as it switches, so the pager executes where the image switches;
So it is executed in a switch function, as shown here:
Now let’s open the browser and see that the fade in effect has been implemented. Let’s look at the following requirements;
Requirement 2: Click the mouse to stop auto play/away recovery
Analysis of ideas:
❝
Mouse over:
- The left and right arrows show that we are at this step
CSSHas been implemented in- Auto play stop:
- The auto-play that we did with the timer;
- So mouse on, we can clear the timer;
Mouse away:
- Resume playback: Restart the timer
❞
Code implementation
// Stop the automatic rotation
container.onmouseenter = function () {
clearInterval(autoTimer);
autoTimer = null;
}
// Start automatic rotation after the mouse leaves
container.onmouseleave = function () {
autoTimer = setInterval(autoMove, interval);
}
Copy the codeRequirement 3: Click the left and right arrows to switch pictures up and down
Thought analysis
❝
Right arrow: in the same direction as we are now auto-playing, so we only need to perform the picture switch function we encapsulated above once;
Left arrow: It is the opposite of the original direction of the toggle, so we can just switch the picture
❞
Code implementation
// Click the right button to switch to the next slide
changeRight.onclick = autoMove;
// Click the left button to switch to the previous one
changeLeft.onclick = function () {
prev = step;
step--;
step < 0 ? (step = sliderList.length - 1) : null;
change();
}
Copy the codeRequirement 4: Click the pager to jump to the corresponding picture
Thought analysis
❝
Bind a click event to each li tag. When you click on an item, find the index of the same image as the index of the item you clicked and let it be displayed
❞
Code implementation
[].forEach.call(paginationList, (item, index) => {
item.onclick = function () {
// If the item clicked is the same as the currently displayed image, no processing is done
if (step === index) return;
prev = step;
step = index;
change();
}
})
Copy the codeOk, now that all our requirements are met, we can integrate the code 😄
JS complete implementation code
let swipter = (function () {
// Get the element to operate on
let container = document.querySelector('.container'),
wrapper = container.querySelector('.wrapper'),
sliderList = wrapper.querySelectorAll('.slider'),
pagination = container.querySelector('.pagination'),
paginationList = pagination.querySelectorAll('li'),
changeLeft = container.querySelector('.changeLeft'),
changeRight = container.querySelector('.changeRight');
// Set the timer and switch time
let autoTimer = null.
interval = 3000.
prev = 0.
step = 0;
// Switch function encapsulation
let change = function change() {
// leave the previous one undisplayed
sliderList[prev].style.zIndex = '0';
sliderList[prev].style.opacity = '0';
// Let the current sheet transition to display
sliderList[step].style.zIndex = '1';
sliderList[step].style.opacity = '1';
sliderList[step].style.transition = 'opacity 2s';
// Automatically toggle with the focus on it
focus();
}
// Implement automatic switching
let autoMove = function autoMove() {
// prev saves the index of the previous table
prev = step;
// step represents the one to be displayed
step++;
// If step is greater than the image, reset step to 0
step >= sliderList.length ? step = 0 : null;
// Perform the switch
change();
};
// Use the timer to complete the automatic switch
autoTimer = setInterval(autoMove, interval);
// Pager autofocus
let focus = function focus() {
[].forEach.call(paginationList, (item, index) => {
step === index ? item.className = 'active' : item.className = ' ';
})
};
// Stop the automatic rotation
container.onmouseenter = function () {
clearInterval(autoTimer);
autoTimer = null;
}
// Start automatic rotation after the mouse leaves
container.onmouseleave = function () {
autoTimer = setInterval(autoMove, interval);
}
// Click on the pager to jump to the corresponding image
let clickFocus = function autoFocus() {
[].forEach.call(paginationList, (item, index) => {
item.onclick = function () {
if (step === index) return;
prev = step;
step = index;
change();
}
})
}
// Click the right button to switch to the next slide
changeRight.onclick = autoMove;
// Click the left button to switch to the previous one
changeLeft.onclick = function () {
prev = step;
step--;
step < 0 ? (step = sliderList.length - 1) : null;
change();
}
return {
init() {
clickFocus();
}
}
}) ();
swipter.init();
Copy the codeAlthough the function is realized, but when we frequently click there will be some problems, so we need to do throttling or anti-shaking, because the little sesame plan to focus on sorting out the knowledge of anti-shaking and throttling, so here is not to continue to improve, you can add 😄 if necessary
Please look forward to little Sesame’s knowledge summary, thank you for your support!
This article is formatted using MDNICE