原生js实现旋转木马轮播图效果
程序员文章站
2024-02-10 12:38:28
话不多说，请看代码：
话不多说，请看代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>旋转木马特效</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);
};
//每张图片对应的样式
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
}
];
// 设置限流函数
var onoff = true ;
// 获取对象
var left = $("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;
var atop = temparr.shift();
temparr.push( atop );
addstyle();
};
};
// 左箭头点击事件
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);
});
};
};
// 设置animate函数
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 ) ;
// 浮点数判断相等时是不准确的
// 所以不能写leader = ( leader + step )/100;
// 保持leader和target都是整数，便于下面判断相等
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);
};
// 设置getstyle函数，获取计算后的样式
function getstyle(obj,attr){
if( window.getcomputedstyle ){
return window.getcomputedstyle(obj,null)[attr];
}else{
return obj.currentstyle[attr];
};
};
})(window)
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： Android实现文字逐字显示出来
下一篇： html5+css3气泡组件的实现