Native js realizes the effect of focus carousel
- 2021-07-10 18:31:36
- OfStack
The native js focus carousel mainly pays attention to these points:
1. Switch the front and back buttons, and pay attention to the auxiliary diagram
2. The middle button can be switched with the front and back buttons, and at the same time, pressing button can also jump to the corresponding index
3. Interval call and infinite carousel.
4. Pay attention to the stop button when animating, or the last animation can only be executed after the next animation is completed
5. In addition, when switching pictures, the animation effect of Button at the bottom starts from the bottom to rise, and two conversion attributes, transform: scale () and transform-origin: 0 100%, are used. The code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewpoint" content="width=device-width,initial-scale=1,user-scalable="no">
<title>20170101</title>
<style type="text/css">
a{text-decoration:none;color:#3DBBF5;}
.wrapper{width:750px;height:350px;background:#001032;margin:20px auto;text-align:center;box-shadow:0 0 12px 2px hsla(0,20%,30%,0.5);padding:10px 15px;position:relative;}
.effect{position:relative;cursor:pointer;}
.effect:hover{color:#02a0e9;}
.effect:before{width:100%;display:inline-block !important;position:absolute;height:1px;background:#02a0e9;transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transform:scale(0,1);content:'';bottom:-5px;left:0;}
.effect:hover:before{transform:scale(1);-webkit-transform:scale(1);}
#lunBo{margin-top:20px;overflow:hidden;height:300px;width:750px;position:relative;}
#list{position:absolute;z-index:22;height:300px;width:5250px;}
#list img{float:left;}
#buttons { position: absolute; height: 20px; width: 150px; z-index: 99; bottom: 20px; left: 40%;}
span { cursor: pointer; float: left; width: 10px; height: 5px; background: #333; margin-right: 10px;}
.on { background: yellow;transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transform:scale(1,4);-ms-transform:scale(1,4);-moz-transform:scale(1,4);-webkit-transform:scale(1,4);transform-origin:0% 0%;-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 100px; line-height:100px;position: absolute; z-index: 92; top: 30%; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#lunBo:hover .arrow { display: block;}
#prev { left: 0px;}
#next { right: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<a class="effect" href="#">2016 It's over ,2017 Coming </a>
<div id="lunBo">
<div id="list" style="left:-750px;">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg" alt=""/>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg" alt=""/>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856m1bhxxx1d8jfnblb.jpg" alt=""/>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856z48mfrrr8u064rf6.jpg" alt=""/>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856e95yze236lvq7y2a.jpg" alt=""/>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg" alt=""/>
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg" alt=""/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</div>
<script>
window.onload = function(){
var lunBo = document.getElementById('lunBo');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
//console.log(buttons);
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var animated = false;
var interval = 3000;
var timer;
// Display the index of the button
function showButton(){
for(var i = 0 ; i < buttons.length ; i++){
if( buttons[i].className == 'on' ){
buttons[i].className = '';
break;
};
};
buttons[index - 1].className='on';
};
function play(){
timer = setTimeout(function () {
next.onclick();
play();
}, interval);
};
function stop(){
clearTimeout(timer);
};
// Forward button
next.onclick = function () {
if (animated) {
return;
}
if (index == 5) {
index = 1;
}
else {
index += 1;
}
animate(-750);
showButton();
};
prev.onclick = function () {
if (animated) {
return;
}
if (index == 1) {
index = 5;
}
else {
index -= 1;
}
animate(750);
showButton();
};
//parseInt() Convert to pure numeric value
function animate(offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset; // Target value
var time = 300; // The total displacement time is 300
var interval = 10; //
var speed = offset/(Math.floor(time/interval)); // Displacement per time
function go(){
if( (speed < 0 && parseInt(list.style.left) > newLeft) || ( speed > 0 && parseInt(list.style.left) < newLeft) ){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}else{
animated = false;
list.style.left = newLeft+ 'px'; // Present displacement
if( newLeft > -750){ // False auxiliary graph
list.style.left = -3750 + 'px';
}
if( newLeft < -3750){
list.style.left = -750 + 'px';
}
}
};
go();
};
// Small button
for(var i=0;i < buttons.length;i++){
buttons[i].onclick = function(){
if(this.className == 'on'){
return;
};
var myIndex = parseInt(this.getAttribute('index'));
var offset = -750 * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
}
}
lunBo.onmouseout = play;
lunBo.onmouseover = stop;
play();
}
</script>
</body>
</html>