原生JS-旋转木马

今天写一个原生JS写的旋转木马JS效果。

实现原理:

1.建立一个数组给每一张图片写对应的z-index,opacity,top,width;

2.实现旋转的操作是把建造的数组里面的第一组值放到最后一组,点下按钮就执行一次。

显示效果图:

html布局:

<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href=""><img src="data:images/logo.png" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="data:images/slide.jpg" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="data:images/slide2.jpg" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="data:images/i1.jpg" width="900" height="500" alt=""></a></li>
<li><a href=""><img src="data:images/sto.jpg" width="900" height="500" alt=""></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" id="arrLeft" class="prev"></a>
<a href="javascript:;" id="arrRight" class="next"></a>
</div>
</div>
</div>

css样式:

 * {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrap {
width: 1200px;
margin: 100px auto;
} .slide {
height: 500px;
position: relative;
width: 1200px;
} .slide ul li {
position: absolute;
top: 0;
left: 0;
z-index: 1;
} .slide li img {
width: 100%;
} .arrow {
position: absolute;
width: 100%;
top: 50%;
opacity: 0;
z-index: 3;
} .prev,
.next { position: absolute;
height: 110px;
width: 110px;
border-radius: 50%;
top: 50%;
//margin-top: -56px;
overflow: hidden;
text-decoration: none;
}
.prev{
left: 0;
background: url("images/slider-icons.png") no-repeat left top; }
.next{
right: 0;
background: url("images/slider-icons.png") no-repeat right top;
}

JS部分:

接下来我们先把对应图片的样式存放到一个数组里面。

 //写每张图片对应的样式
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
} //
];

页面加载时,图片就散开了,即调用了刚刚建造的数组,把他们逐一分配给每张图片

  var list=my$("slide").getElementsByTagName("li"); //拿到所有li
function assign() { //分配函数
for (var i=0;i<list.length;i++){
animate(list[i],config[i],function () {
flag=true;
});
}
}
assign();

鼠标进入和离开会有有左右箭头的显示和隐藏,点击按钮旋转的原理即改变数组第一个放在最后或把最后一组放在第一个。其中的flag为控制点击按钮时确保一组动画完成后才能继续执行下一个旋转动画。

   //鼠标进入,左右焦点的div显示
my$("wrap").onmouseover=function () {
animate(my$("arrow"),{"opacity":1});
};
//鼠标离开,左右焦点的div隐藏
my$("wrap").onmouseout=function () {
animate(my$("arrow"),{"opacity":0});
};
//点击右边按钮事件
my$("arrRight").onclick=function () {
if (flag){
flag=false;
config.push(config.shift()); //把第一组值放到最后一组 assign();
} };
//点击左边按钮事件
my$("arrLeft").onclick=function () {
if (flag){
flag=false;
config.unshift(config.pop()); //把最后一组值放到第一组
assign();
}
};
};

完整JS代码:

<script>
//变速动画函数
function animate(element, json, fn) {
clearInterval(element.timeId); //清理定时器
element.timeId = setInterval(function () {
var flag = true; //假设默认为当前值已经等于目标值
for (var arrt in json) {
if (arrt == "opacity") { //如果属性值为opacity
var current = getStyle(element, arrt) * 100; //current和target先扩大100倍
target = json[arrt] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[arrt] = current / 100; //运算完后缩小100倍
} else if (arrt == "zIndex") { //如果属性值为zindex
element.style[arrt] = json[arrt];
} else { //普通属性
var current = parseInt(getStyle(element, arrt));
target = json[arrt];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step); //step大于零向上取整,小于零向下取整
current += step;
element.style[arrt] = current + "px";
}
if (current != target) {
flag = false;
}
}
if (flag) { //只有所有属性的当前值已经等于目标值,才清理定时器
clearInterval(element.timeId);
if (fn) { //回调函数
fn();
}
}
console.log("当前位置:" + current + "目标位置:" + target + " 移动步数:" + step); //测试函数
}, 20);
} function getStyle(element, arrt) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[arrt] : element.currentStyle[arrt]; }
function my$(id) {
return document.getElementById(id);
} //写每张图片对应的样式
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
} //
]; var flag=true; //假设动画全部执行完毕-----锁 //页面加载的事件
window.onload=function () {
//1---散开图片
var list=my$("slide").getElementsByTagName("li"); //拿到所有li
function assign() { //分配函数
for (var i=0;i<list.length;i++){
animate(list[i],config[i],function () {
flag=true;
});
}
}
assign();
//鼠标进入,左右焦点的div显示
my$("wrap").onmouseover=function () {
animate(my$("arrow"),{"opacity":1});
};
//鼠标离开,左右焦点的div隐藏
my$("wrap").onmouseout=function () {
animate(my$("arrow"),{"opacity":0});
};
//点击右边按钮事件
my$("arrRight").onclick=function () {
if (flag){
flag=false;
config.push(config.shift()); //把第一组值放到最后一组 assign();
} };
//点击左边按钮事件
my$("arrLeft").onclick=function () {
if (flag){
flag=false;
config.unshift(config.pop()); //把最后一组值放到第一组
assign();
}
};
}; </script>

原生JS-旋转木马的更多相关文章

  1. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  2. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  5. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  6. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  7. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  8. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

  9. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  10. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

  1. vim 中文乱码怎么解决

    一般来说只需要正确设置vim的编码识别序列就很少会遇到乱码问题: set fileencodings=ucs-bom,utf-8,utf-16,gbk,big5,gb18030,latin1 这个设置 ...

  2. Scania SDP3 2.38.2.37.0 Download, Install, Activate: Confirmed

    Download: Scania Diagnos & Programmer SDP3 2.38.2.37.0 free version and tested version SDP3 2.38 ...

  3. UI交互设计关键词:情感化设计与心理

    情感化设计,一定有一个关键词.情感,是指人对周围事物和自身以及对自己行为的态度,它是人对客观事物的一种特殊的反映形式,是主体对外界刺激给予肯定或否定的心理反应,也是对客观事物是否符合自己需要的态度或体 ...

  4. linux学习第十五天 (Linux就该这么学) 找到一本不错的Linux电子书,附《Linux就该这么学》章节目录

    今天收尾DNS内容复习了,还有分享解析配置,都没有记,主要访问同一个域名,就近访问,

  5. Linux 网络编程 入门-常用函数

    网络连接无外乎服务器和客户端两方面的编程. 对于服务器大致的流程是:1---调用socket函数创建套接字 2---调用bind函数分配IP地址和端口号 3---调用listsen函数将套接字转为可接 ...

  6. RANSAC

    一.概述 RANSAC(RANdom SAmple Consensus)随机抽样一致,是用来从一组观测数据中估计数学模型参数的一种方法.由于是观测数据,避免不了有误差存在,当误差太大了就变成了无效数据 ...

  7. 用pandas库修改excel文件里的内容,并把excel文件格式存为csv格式,再将csv格式改为html格式

    假设有Excel文件data.xlsx,其中内容为: ID  age  height     sex  weight张三   1   39     181  female      85李四   2  ...

  8. Linux下mysql定时自动备份并FTP到远程脚本

    1.添加backupmysqleveryday.sh(vi /data/shell/backupmysqleveryday.sh) #!/bin/sh #this shell is user for ...

  9. 2019.03.25 bzoj4568: [Scoi2016]幸运数字(倍增+线性基)

    传送门 题意:给你一棵带点权的树,多次询问路径的最大异或和. 思路: 线性基上树?? 倍增维护一下就完了. 时间复杂度O(nlog3n)O(nlog^3n)O(nlog3n) 代码: #include ...

  10. eclipse 无法记住svn密码

    每次要求输入密码,很恼人.经过一番折腾,在stackoverflow上找到了解决方案,上面大神果然多 简单的说,就是通过查看工作空间的日志文件,发现报了个java异常,缺少一个class文件(org. ...