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 相关文章推荐
初识JQuery 实例一(first)
Mar 16 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
extract-text-webpack-plugin用法详解
Feb 14 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP 面向对象详解
2012/09/13 PHP
php中文验证码实现示例分享
2014/01/12 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php微信公众号开发之简答题
2018/10/20 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
关于js类的定义
2011/06/28 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Python3爬楼梯算法示例
2019/03/04 Python
详解python中sort排序使用
2019/03/23 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
介绍一下gcc特性
2015/10/31 面试题
乡镇综治宣传月活动总结
2014/07/02 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
看雷锋电影观后感
2015/06/10 职场文书
python实现简单倒计时功能
2021/04/21 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle