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 大家可以参考下
Oct 13 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JS控制输入框内字符串长度
May 21 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
基于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源代码
2009/08/21 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
JavaScript 继承的实现
2009/07/09 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
jquery 插件开发备注
2010/08/27 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
浅谈flask源码之请求过程
2018/07/26 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
Internal修饰符有什么含义
2013/07/10 面试题
环境科学专业个人求职信
2013/12/15 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
法律专业自荐信
2014/06/03 职场文书
2014年图书室工作总结
2014/12/09 职场文书
加入学生会自荐书
2015/03/05 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
工地材料员岗位职责
2015/04/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
安全生产会议制度
2015/08/06 职场文书
素质教育学习心得体会
2016/01/19 职场文书
图神经网络GNN算法
2022/05/11 Python