原生JS-旋转木马
原生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-旋转木马的更多相关文章
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- python_appium_模拟器启动app进行登录
#coding=utf-8from appium import webdriverimport timedesired_caps = {} #列表desired_caps['platformName' ...
- day04-Servlet介绍(1)
1.servlet的概述 a.什么是servlet --servlet是javaWeb的三大组件(Listener,Filter)之一,他属于动态资源 --servlet的作用是(10086): 服务 ...
- 201771010134杨其菊《面向对象程序设计(java)》第十三周学习总结
第十三周学习总结 第一部分:理论知识 第11章 事件处理(事件处理基础; 动作; 鼠标事件;AWT事件继承层次) 1. 事件源(event source):能够产生事件的对象都可 以成为事件源,如文本 ...
- 教你如何用ps制作紫色光斑效果
1.新建800x800画布 2.设置前景色和背景色分别为#b38adb ,#212121;执行"滤镜"-"渲染"-"云彩"操作 3.执行&q ...
- c语言实验一
#include <stdio.h> int main(){ int a,b,sum; a=123; b=456; sum = a + b; printf("sum is %d\ ...
- Gitlab使用时的一些注意事项
1 gitlab-runner 不选中,在commit没有tab的时候,runner不会进行运行 2 在新安装的gitlab的环境上更改@localhost为远程地址 2.1 vim /opt/gi ...
- Java+Selenium自动化对非输入框的日历或日期控件的处理
如图: 1.问题描述: 在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这 ...
- UE4行为树
这是 UE4中行为树编辑器 中可用的默认节点.取决于开发项目的不同(如射击游戏),可能会有更多节点.这里介绍五种行为树节点类型: 节点类型 描述 Composite(流程控制节点) 这种节点定义一 ...
- U盘安装centos7 关键步骤
出现安装界面 按tab键或e键进行修改 一般默认第二行为: vmlinuz intrd=initrd.img inst.stage2=hd:LABEL=CentOS\x207\x20x86_64 rd ...
- C++标准库之string返回值研究
先说结论(不一定适用所有环境): 1) GCC默认开启了返回值优化(RVO),除非编译时指定“-fno-elide-constructors”: 2) 现代C++编译器一般都支持返回值优化: 3) s ...