原生js实现旋转木马轮播图效果_网络技术_宿州市腾雀网络科技有限公司

原生js实现旋转木马轮播图效果

发布时间 - 2026-01-10 23:18:39 点击率：次

话不多说，请看代码：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js旋转木马轮播图 # 旋转木马轮播图 # 旋转木马轮播 # JS实现旋转木马轮播案例 # js轮播图之旋转木马效果 # JavaScript实现旋转木马轮播图 # js实现旋转木马轮播图效果 # JS实现旋转木马轮播图 # js实现旋转木马效果 # JS实现旋转木马式图片轮播效果 # 原生JS实现旋转木马式图片轮播插件 # 原生js实现旋转木马效果 # 都是 # 多说 # 不准确 # 浮点数 # btn_lef # btn_rig # body # div # opacity # top # left # li # absolute # corrow # index # img # id # mod # misc # php

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：看看swoole多进程操作

下一篇：流量突增怎么办？购买服务器做网站前需了解的扩展方案

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：看看swoole多进程操作

下一篇：流量突增怎么办？购买服务器做网站前需了解的扩展方案