原生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. Bar 柱状图

    1.生成基本图形 向上向下分别生成12个数据,X为 0 到 11 的整数 ,Y是相应的均匀分布的随机数据. 使用的函数是plt.bar,参数为X和Y: import matplotlib.pyplot ...

  2. 旅游类App的原型制作分享-Klook

    Klook是一款旅游类App,它能探索和预订惊人的旅行活动.在世界各地以最优惠的价格畅玩. 这款原型中,用到了Mockplus的两种滚动方式,一种是把手机外壳拉长,另一种是使用滚动区组件,其中,滚动区 ...

  3. DNN原理探究系列之目录与序章篇

    序言: 神经网络结构,作为最成功的机器学习模型之一,其工作原理一直被埋藏得比较深,其解释性以至于被称为黑盒. 自己对于DNN的理解也只能算刚踏入了门槛,对于人脑的原理与DNN原理之间的互通性,一直是非 ...

  4. ajax 参数记录

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  5. Mac系统下 解决ThinkPHP生成目录,无法保存问题

    Mac环境下我们建立目录的时候往往要增加目录的时候要修改权限,输入密码,大大的降低了效率. 解决办法: 1.找到你的目录站点 终端打开打 2.终端输入find file -exec sudo chmo ...

  6. U3D一些使用

    1,UGUI Button同时监听点击事件和长按事件:https://blog.csdn.net/yye4520/article/details/80844870

  7. 索引Log

    最左前缀原则 B+ 主键索引ID =>ID树 非主键索引K 先K树=>ID树 主键自增索引

  8. oracle创建与mysql的dblink

    1.先简单介绍下环境   操作系统:windows 2008 R2 (64bits) oracle数据库:10gr2 10.2.0.3.0(32bits) mysql数据库:5.1 (32bits) ...

  9. IO流的种类

    字节流:InputStream(new FileInputStream(new File()); Outpustream(new FileOutputStream(new File()); 字符流:  ...

  10. JavaGC学习笔记

    1.简介Java在JVM虚拟机上的垃圾回收(GC)机制,在合适的时间触发垃圾回收,将不需要的内存空间回收释放,避免无限制的内存增长导致的OOM. 1.1 Java堆内存结构Java将堆内存分为3大部分 ...