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 相关文章推荐
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
JS 数字转换研究总结
Dec 26 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
js回到页面指定位置的三种方式
Dec 17 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python正则表达式re之compile函数解析
2017/10/25 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
毕业设计计划书
2014/01/09 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
中秋节随笔
2015/08/15 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
python实现Nao机器人的单目测距
2021/09/04 Python