原生js实现旋转木马轮播图效果
话不多说，请看代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>旋转木马特效</title>
<styletype="text/css">
*{margin:0;padding:0;list-style:none;}
#demo{width:1200px;margin:100pxauto0;}
#innerht{width:1200px;height:500px;position:relative;}
ulli{position:absolute;top:0;left:0;z-index:1;}
ulliimg{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>
<divid="demo">
<divid="innerht">
<ul>
<li><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=dac666f84f6ad05ec026ad655ea0f159"alt=""></a></li>
<li><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=89c2213f2b614db88b5724b82dafc02a"alt=""></a></li>
<li><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e7969486909c076abf795995bdc3da54"alt=""></a></li>
<li><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b404e53a3f4dd7e97438693e8e2d4082"alt=""></a></li>
<li><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=ed309dded163d172b53154b2046eb1a2"alt=""></a></li>
</ul>
<divid="corrow">
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"id="btn_lef"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=206927b03b97b194bc04cdcaf0e10a33"height="112"width="76"alt=""></a>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"id="btn_rig"><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=0e84253cccdf667e293522a0a107eeec"height="112"width="76"alt=""></a>
</div>
</div>
</div>
</body>
<scripttype="text/javascript">
(function(window){
function$(id){
returndocument.getElementById(id);
};
//每张图片对应的样式
vartempArr=[
{
"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
}
];
//设置限流函数
varonOff=true;
//获取对象
varleft=$("btn_lef"),right=$("btn_rig"),innerht=$("innerht"),ul=innerht.children[0],lis=ul.children,arrow=$("corrow");
//给每个li添加样式
addStyle();
//大盒子的hover事件
innerht.onmouseover=function(){
animate(arrow,{"opacity":1});
};
innerht.onmouseout=function(){
animate(arrow,{"opacity":0});
};
//右箭头点击事件
right.onclick=function(){
if(onOff){
onOff=false;
varatop=tempArr.shift();
tempArr.push(atop);
addStyle();
};
};
//左箭头点击事件
left.onclick=function(){
if(onOff){
onOff=false;
varapop=tempArr.pop();
tempArr.unshift(apop);
addStyle();
};
};
functionaddStyle(){
for(i=0;i<lis.length;i++){
animate(lis[i],tempArr[i],function(){
onOff=true;
console.log(onOff);
});
};
};
//设置animate函数
functionanimate(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varflog=true;
for(kinjson){
if(k==="zIndex"){
obj.style[k]=json[k];
}elseif(k==="opacity"){
varleader=getStyle(obj,k)*100;
vartarget=json[k]*100;
varstep=(target-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
//浮点数判断相等时是不准确的
//所以不能写leader=(leader+step)/100;
//保持leader和target都是整数，便于下面判断相等
leader=leader+step;
obj.style[k]=leader/100;
}else{
varleader=parseInt(getStyle(obj,k))||0;
vartarget=json[k];
varstep=(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);
};
//设置getStyle函数，获取计算后的样式
functiongetStyle(obj,attr){
if(window.getComputedStyle){
returnwindow.getComputedStyle(obj,null)[attr];
}else{
returnobj.currentStyle[attr];
};
};
})(window)
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！