Native js realizes the carousel effect of merry go round
- 2021-07-24 09:52:04
- OfStack
Without saying much, please look at the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Carousel special effects </title>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
#demo{width:1200px;margin:100px auto 0;}
#innerht{width:1200px;height:500px;position:relative;}
ul li{position:absolute;top:0;left:0;z-index:1;}
ul li img{width:100%;}
#corrow{position:absolute;width:100%;top:50%;opacity:0;z-index:99;}
#btn_lef,#btn_rig{position:absolute;height:112px;width:76px;top:50%;margin-top:-56px;}
#btn_lef{left:0;}
#btn_rig{right:0;}
</style>
</head>
<body>
<div id="demo">
<div id="innerht">
<ul>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=dac666f84f6ad05ec026ad655ea0f159" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=89c2213f2b614db88b5724b82dafc02a" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e7969486909c076abf795995bdc3da54" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b404e53a3f4dd7e97438693e8e2d4082" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=ed309dded163d172b53154b2046eb1a2" alt=""></a></li>
</ul>
<div id="corrow">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="btn_lef"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=206927b03b97b194bc04cdcaf0e10a33" height="112" width="76" alt=""></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="btn_rig"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=0e84253cccdf667e293522a0a107eeec" height="112" width="76" alt=""></a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
// The style corresponding to each picture
var tempArr = [
{
"width":400,
"top":20,
"left":50,
"opacity":0.2,
"zIndex":2
},
{
"width":600,
"top":70,
"left":0,
"opacity":0.8,
"zIndex":3
},
{
"width":800,
"top":100,
"left":200,
"opacity":1,
"zIndex":4
},
{
"width":600,
"top":70,
"left":600,
"opacity":0.8,
"zIndex":3
},
{
"width":400,
"top":20,
"left":750,
"opacity":0.2,
"zIndex":2
}
];
// Set the current limiting function
var onOff = true ;
// Get an object
var left = $("btn_lef"),right = $("btn_rig"),innerht = $("innerht"),ul = innerht.children[0],lis = ul.children,arrow = $("corrow");
// To each li Add Style
addStyle();
// Large box hover Events
innerht.onmouseover = function(){
animate(arrow,{"opacity":1});
};
innerht.onmouseout = function(){
animate(arrow,{"opacity":0});
};
// Right arrow click event
right.onclick = function(){
if( onOff ){
onOff = false;
var atop = tempArr.shift();
tempArr.push( atop );
addStyle();
};
};
// Left arrow click event
left.onclick = function(){
if( onOff ){
onOff = false;
var apop = tempArr.pop();
tempArr.unshift( apop );
addStyle();
};
};
function addStyle(){
for( i = 0 ; i < lis.length ; i++ ){
animate(lis[i],tempArr[i],function(){
onOff = true;
console.log(onOff);
});
};
};
// Settings animate Function
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flog = true ;
for( k in json ){
if( k === "zIndex" ){
obj.style[k] = json[k];
}else if( k === "opacity" ){
var leader = getStyle(obj,k) * 100 ;
var target = json[k] * 100 ;
var step = ( target - leader ) / 10 ;
step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ;
// It is inaccurate to judge the equality of floating-point numbers
// So I can't write leader = ( leader + step )/100;
// Keep leader And target They are all integers, which is convenient for the following judgment to be equal
leader = leader + step ;
obj.style[k] = leader / 100;
}else{
var leader = parseInt( getStyle(obj,k) ) || 0 ;
var target = json[k];
var step = ( target - leader ) / 10 ;
step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ;
leader = leader + step ;
obj.style[k] = leader + "px";
};
if( leader !== target ){
flog = false ;
};
};
console.log(flog);
if( flog ){
clearInterval( obj.timer );
if( fn ){
fn();
};
};
}, 15);
};
// Settings getStyle Function to get the calculated style
function getStyle(obj,attr){
if( window.getComputedStyle ){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
};
};
})(window)
</script>
</html>