JavaScript实现旋转木马轮播图


Posted in Javascript onMarch 16, 2020

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

html代码段

图片自己添加,或者使用本人的上传照片,拉到最下面即可看见

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

css代码段:

初始化 reset

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;
 position: absolute;
 top: 50%;
 z-index: 1000;
 width: 100%;
}

.prev, .next {
 width: 76px;
 height: 112px;
 position: absolute;
 z-index: 99;
}

.prev {
 left: 0;
 background: url(../images/prev.png) no-repeat;
}

.next {
 right: 0;
 background-image: url(../images/next.png);
}

js代码段:

这个是封装好的的js代码,直接引用即可

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.zIndex = 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";
  }
  if (leader != target) {
   flag = false;
  }
  }
  if (flag) {
  clearInterval(obj.timer);
  if (fn) {
   fn();
  }
  }
 }, 15);
 }
 function getStyle(obj, attr) {
 if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
 } else {
  return obj.currentStyle[attr];
 }
 }

定义onload函数,获取每一个对象,设置鼠标经过事件,鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失;然后.设置图片位置(给对象赋值)

window.onload = function () {
 //alert("外部的JS");
 //找人
 var wrap = document.getElementById("wrap");
 var arrow = document.getElementById("arrow");
 var arrLeft = document.getElementById("arrLeft");
 var arrRight = document.getElementById("arrRight");
 var slide = document.getElementById("slide");
 var ul = slide.children[0];
 var lis = ul.children;//所有图片
 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失
 wrap.onmouseover = function () {
 animate(arrow, {"opacity": 1});
 };
 wrap.onmouseout = function () {
 animate(arrow, {"opacity": 0});
 };
 //2.设置图片位置

 var config = [
 {
  "width": 400,
  "top": 20,
  "left": 50,
  "opacity": 0.2,
  "zIndex": 2
 },//0
 {
  "width": 600,
  "top": 70,
  "left": 0,
  "opacity": 0.8,
  "zIndex": 3
 },//1
 {
  "width": 800,
  "top": 100,
  "left": 200,
  "opacity": 1,
  "zIndex": 4
 },//2
 {
  width: 600,
  top: 70,
  left: 600,
  opacity: 0.8,
  zIndex: 3
 },//3
 {
  "width": 400,
  "top": 20,
  "left": 750,
  "opacity": 0.2,
  "zIndex": 2
 }//4
 ];//其实就是一个配置单 规定了每张图片的大小位置层级透明度

 //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置
 function assign() {
 for (var i = 0; i < lis.length; i++) {
  animate(lis[i], config[i], function () {
  flag = true;//动画执行完成后重新打开阀门
  });
 }
 }

 assign();
 //3.点击箭头旋转
 //点击右箭头
 arrRight.onclick = function () {
 if (flag) {
  flag = false;//关闭阀门
  //把开始的元素放到最后
  config.push(config.shift());
  assign();
 }
 };
 //点击左箭头
 arrLeft.onclick = function () {
 if (flag) {
  flag = false;
  //把最后的元素放到开始
  config.unshift(config.pop());
  assign();
 }

 };
 //4.添加节流阀
 var flag = true;//表示阀门是打开的

};

本人刚刚开始入行前端,希望大佬有什么意见的话,欢迎给我留言,你们的支持就是我最大的动力

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 #Javascript
JavaScript实现拖拽效果
Mar 16 #Javascript
js实现点赞效果
Mar 16 #Javascript
Javascript Web Worker使用过程解析
Mar 16 #Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 #Javascript
JS手写一个自定义Promise操作示例
Mar 16 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python实现二分查找算法实例
2015/05/26 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python try...finally...的实现方法
2020/11/25 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
给老师的检讨书
2014/02/11 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
大学生入党自荐书
2015/03/05 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Python访问Redis的详细操作
2021/06/26 Python