Native JS carousel
Today write a native JS write carousel JS effect.
Implementation principle:
1. Create an array to write the corresponding z-index, opacity, top, width for each picture;
2. The operation to realize rotation is to put the first group of values in the built array into the last group, and click the button to execute once.
Display renderings:
html layout:
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href=""><img src="images/logo.png" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="images/slide.jpg" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="images/slide2.jpg" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="images/i1.jpg" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="images/sto.jpg" width="900" height="500" alt=""></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" id="arrLeft" class="prev"></a>
<a href="javascript:;" id="arrRight" class="next"></a>
</div>
</div>
</div>
css Style:
* { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 1200px; margin: 100px auto; } .slide { height: 500px; position: relative; width: 1200px; } .slide ul li { position: absolute; top: 0; left: 0; z-index: 1; } .slide li img { width: 100%; } .arrow { position: absolute; width: 100%; top: 50%; opacity: 0; z-index: 3; } .prev, .next { position: absolute; height: 110px; width: 110px; border-radius: 50%; top: 50%; //margin-top: -56px; overflow: hidden; text-decoration: none; } .prev{ left: 0; background: url("images/slider-icons.png") no-repeat left top; } .next{ right: 0; background: url("images/slider-icons.png") no-repeat right top; }
Part JS:
Next, we will store the corresponding image style in an array.
//Write the style corresponding to each picture var config = [ { "width": 400, "top": 20, "left": 50, "opacity": 0.2, "zIndex": 2 }, //0 { "width": 600, "top": 70, "left": 0, "opacity": 0.8, "zIndex": 3 }, //1 { "width": 800, "top": 100, "left": 200, "opacity": 1, "zIndex": 4 }, //2 { "width": 600, "top": 70, "left": 600, "opacity": 0.8, "zIndex": 3 }, //3 { "width": 400, "top": 20, "left": 750, "opacity": 0.2, "zIndex": 2 } //4 ];
When the page is loaded, the pictures are scattered, that is, the array just built is called to assign them to each picture one by one
var list=my$("slide").getElementsByTagName("li"); //Get all li function assign() { //Allocation function for (var i=0;i<list.length;i++){ animate(list[i],config[i],function () { flag=true; }); } } assign();
There will be left and right arrows to show and hide when the mouse enters and leaves. Click the button to rotate the principle, that is, change the first array to the last or the last group to the first. The flag is used to control the next rotation animation after a group of animations are completed when clicking the button.
//Mouse in, left and right focus div display my$("wrap").onmouseover=function () { animate(my$("arrow"),{"opacity":1}); }; //Mouse away, left and right focus div hide my$("wrap").onmouseout=function () { animate(my$("arrow"),{"opacity":0}); }; //Click the right button event my$("arrRight").onclick=function () { if (flag){ flag=false; config.push(config.shift()); //Put the first group of values in the last group assign(); } }; //Click the left button event my$("arrLeft").onclick=function () { if (flag){ flag=false; config.unshift(config.pop()); //Put the last set of values in the first set assign(); } }; };
Full JS code:
<script>
//Variable speed animation function
function animate(element, json, fn) {
clearInterval(element.timeId); //Cleaning timer
element.timeId = setInterval(function () {
var flag = true; //Assume that the current value is equal to the target value by default
for (var arrt in json) {
if (arrt == "opacity") { //If the property value is opacity
var current = getStyle(element, arrt) * 100; //current and target Expand 100 times first
target = json[arrt] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[arrt] = current / 100; //100 times reduction after operation
} else if (arrt == "zIndex") { //If the property value is zindex
element.style[arrt] = json[arrt];
} else { //General attribute
var current = parseInt(getStyle(element, arrt));
target = json[arrt];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step); //step Greater than zero rounding up, less than zero rounding down
current += step;
element.style[arrt] = current + "px";
}
if (current != target) {
flag = false;
}
}
if (flag) { //Only when the current value of all properties is equal to the target value, can the timer be cleaned up
clearInterval(element.timeId);
if (fn) { //Callback function
fn();
}
}
console.log("Current location:" + current + "Target location:" + target + " Move steps:" + step); //Test function
}, 20);
}
function getStyle(element, arrt) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[arrt] : element.currentStyle[arrt];
}
function my$(id) {
return document.getElementById(id);
}
//Write the style corresponding to each picture
var config = [
{
"width": 400,
"top": 20,
"left": 50,
"opacity": 0.2,
"zIndex": 2
}, //0
{
"width": 600,
"top": 70,
"left": 0,
"opacity": 0.8,
"zIndex": 3
}, //1
{
"width": 800,
"top": 100,
"left": 200,
"opacity": 1,
"zIndex": 4
}, //2
{
"width": 600,
"top": 70,
"left": 600,
"opacity": 0.8,
"zIndex": 3
}, //3
{
"width": 400,
"top": 20,
"left": 750,
"opacity": 0.2,
"zIndex": 2
} //4
];
var flag=true; //Let's say the animation is finished-----lock
//Page loaded events
window.onload=function () {
//1---Scatter pictures
var list=my$("slide").getElementsByTagName("li"); //Get all li
function assign() { //Allocation function
for (var i=0;i<list.length;i++){
animate(list[i],config[i],function () {
flag=true;
});
}
}
assign();
//Mouse in, left and right focus div display
my$("wrap").onmouseover=function () {
animate(my$("arrow"),{"opacity":1});
};
//Mouse away, left and right focus div hide
my$("wrap").onmouseout=function () {
animate(my$("arrow"),{"opacity":0});
};
//Click the right button event
my$("arrRight").onclick=function () {
if (flag){
flag=false;
config.push(config.shift()); //Put the first group of values in the last group
assign();
}
};
//Click the left button event
my$("arrLeft").onclick=function () {
if (flag){
flag=false;
config.unshift(config.pop()); //Put the last set of values in the first set
assign();
}
};
};
</script>