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


Posted in Javascript onJanuary 10, 2020

本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下

整个页面的文件结构如下图所示:

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

html部分代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>旋转木马轮播图</title>
 <link rel="stylesheet" href="css/myStyle.css" rel="external nofollow" />
 <script type="text/javascript" src="js/animate.js"></script>
 <script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
 <div class="slide" id="slide">
  <ul>
   <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
   <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
  </ul>
  <div class="arrow" id="arrow">
   <a href="javascript:;" class="prev" id="arrLeft"></a>
   <a href="javascript:;" class="next" id="arrRight"></a>
  </div>
 </div>
</div>
</body>
</html>

在html部分引入的myStyle.css文件部分代码

@charset "UTF-8";
 
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
 margin:0;
 padding:0
}
 
body,button,input,select,textarea{
 font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
 color:#666;
}
 
ol,ul{
 list-style:none
}
 
a{
 text-decoration:none
}
 
fieldset,img{
 border:0;
 vertical-align:top;
}
 
a,input,button,select,textarea{
 outline:none
}
 
a,button{
 cursor:pointer
}
 
.wrap{
 width:1200px;
 margin:100px auto;
}
.slide{
 height:500px;
 position: relative;
}
 
.slide li{
 position:absolute;
 left:200px;
 top:0
}
 
.slide li img{
 width:100%
}
 
.arrow{
 opacity:0;
}
 
.prev ,.next{
 width:76px;
 height:112px;
 position:absolute;
 top:50%;
 margin-top:-56px;
 background:url(../images/prev.png) no-repeat;
 z-index:99;
}
 
 
.next{
 right:0;
 background-image:url(../images/next.png);
}

在html部分引入的animate.js文件部分代码

/**
 * Created by RENPINGSHENG on 2018/4/6.
 */
 
function animate(obj,json,fn) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  var flag = true;
  for(var k in json){
   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;
    obj.style[k] = leader /100;
   } else if ( k == "zIndex"){
    obj.style[k] = json[k];
   }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";
   }
 
   console.log("target:" + target + "leader:" + leader + "step:" + step);
   if (leader != target){
    flag = false;
   }
  }
 
  if (flag){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }
 },15)
}
 
function getStyle(obj,attr){
 if (obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return window.getComputedStyle(obj,null)[attr];
 }
}

在html部分引入的my.js文件部分代码

/**
 * Created by RENPINGSHENG on 2018/4/6.
 */
 
 
window.onload = function () {
 var wrap = document.getElementById("wrap");
 var slide = document.getElementById("slide");
 var ul = slide.children[0];
 var lis = ul.children;
 var arrow = document.getElementById("arrow");
 var arrRight = document.getElementById("arrRight");
 var arrLeft = document.getElementById("arrLeft");
 
 var config = [
  {
   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
  }
 ];
 
 wrap.onmouseover = function () {
  animate(arrow,{"opacity":1});
 }
 wrap.onmouseout = function () {
  animate(arrow,{"opacity":0});
 }
 function assign() {
  for(var i = 0;i < lis.length;i++){
   animate(lis[i],config[i],function(){
    flag = true;
   })
  }
 }
 
 var flag = true;
 assign();
 arrRight.onclick = function () {
  flag = false;
  config.push(config.shift());
  assign();
 };
 arrLeft.onclick = function () {
  flag = false;
  config.unshift(config.pop());
  assign();
 }
}

代码完成后,用浏览器打开网页,效果如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
js实现倒计时关键代码
May 05 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 #Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 #Javascript
JavaScript复制变量三种方法实例详解
Jan 09 #Javascript
js实现左右轮播图
Jan 09 #Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 #Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 #Javascript
Websocket 向指定用户发消息的方法
Jan 09 #Javascript
You might like
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php的dl函数用法实例
2014/11/06 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
西门豹教学反思
2014/02/04 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
2014年中秋寄语
2014/08/11 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
防止web项目中的SQL注入
2021/12/06 MySQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python