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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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
11个PHP 分页脚本推荐
2011/08/15 PHP
php 多文件上传的实现实例
2016/10/23 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JS跨域代码片段
2012/08/30 Javascript
js取得url地址参数实例
2013/02/22 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
python计算日期之间的放假日期
2018/06/05 Python
Python for i in range ()用法详解
2020/09/18 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Python extract及contains方法代码实例
2020/09/11 Python
python绘制分布折线图的示例
2020/09/24 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
高中军训感想300字
2014/03/04 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
优秀教师个人总结
2015/02/11 职场文书
经营场所使用证明
2015/06/19 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB