JS——旋转木马
1、opacity和zIndex的综合运用
2、样式的数组的替换：向右边滑动---删除样式数组第一位并在数组最后添加；向左边滑动---删除样式数组最后一位并在数组前添加
3、开闭原则，只有当回调函数执行完毕以后，我再次点击滑动按钮才有用
初始化
1 2 3 4 5
a b c d e ==>向右边滑动，数字动，样式不变
5 1 2 3 4
a b c d e
==>向右边滑动，字母动---删除第一位并在数组最后添加
1 2 3 4 5
b c d e a ==>向左边滑动，数字动
2 3 4 5 1
a b c d e
==>向左边滑动，字母动---删除最后一位并在数组前添加
1 2 3 4 5
e a b c d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 1200px;
margin: 10px auto;
} .content {
height: 500px;
position: relative;
} ul {
list-style: none;
} li {
position: absolute;
left: 200px;
top: 0;
} li img {
width: 100%;
} .arrow {
opacity: 0;
} .prev, .next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url(images/prev.png) no-repeat;
z-index: 99;
} .next {
right: 0;
background-image: url(images/next.png);
}
</style>
<script>
/**
* Created by Lenovo on 2016/9/13.
*/
window.onload = function () {
var arr = [
{ // 1
width: 400,
top: 70,
left: 50,
opacity: 20,
zIndex: 2
},
{ // 2
width: 600,
top: 120,
left: 0,
opacity: 80,
zIndex: 3
},
{ // 3
width: 800,
top: 100,
left: 200,
opacity: 100,
zIndex: 4
},
{ // 4
width: 600,
top: 120,
left: 600,
opacity: 80,
zIndex: 3
},
{ //5
width: 400,
top: 70,
left: 750,
opacity: 20,
zIndex: 2
}
]; //0.获取元素
var content = document.getElementById("content");
var liArr = content.children[0].children;
var arrow = content.children[1];
var arrowChildren = arrow.children;
//设置一个开闭原则变量，点击以后修改这个值。
var flag = true; //1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
content.onmouseenter = function () {
//arrow.style.opacity = 1;
animate(arrow, {"opacity": 100});
}
content.onmouseleave = function () {
//arrow.style.opacity = 1;
animate(arrow, {"opacity": 0});
}
//2.利用缓动框架初始化整个页面，move函数无参数，不会操作arr数组
move();
//3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
arrowChildren[0].onclick = function () {
if (flag) {
flag = false;
move(true);
}
}
arrowChildren[1].onclick = function () {
if (flag) {
flag = false;
move(false);
}
} //4.书写函数。
function move(bool) {
//判断：如果等于undefined,那么就不执行这两个if语句
if (bool === true || bool === false) {
if (bool) {
arr.unshift(arr.pop());
} else {
arr.push(arr.shift());
}
}
//再次为页面上的所有li赋值属性，利用缓动框架
for (var i = 0; i < liArr.length; i++) {
animate(liArr[i], arr[i], function () {
flag = true;
});
}
} } //参数变为2个，将属性atrr和值都存储到json中
function animate(ele, json, fn) {
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for (var k in json) {
//四部
var leader;
//判断如果属性为opacity的时候特殊获取值
if (k === "opacity") {
leader = getStyle(ele, k) * 100 || 100;
} else {
leader = parseInt(getStyle(ele, k)) || 0;
}
//1.获取步长
var step = (json[k] - leader) / 10;
//2.二次加工步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//3.赋值
//ele.style[k] = leader + "px";
//特殊情况特殊赋值
if (k === "opacity") {
ele.style[k] = leader / 100;
//兼容IE678
ele.style.filter = "alpha(opacity=" + leader + ")";
//如果是层级，一次行赋值成功，不需要缓动赋值
//为什么？需求！
} else if (k === "zIndex") {
ele.style.zIndex = json[k];
} else {
ele.style[k] = leader + "px";
} //4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
// if (json[k] !== leader) {
// bool = false;
// }
if (Math.abs(json[k] - leader) > Math.abs(step)) {
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if (bool) {
for (k in json) {
if (k === "opacity") {
ele.style[k] = json[k] / 100;
ele.style.filter = "alpha(opacity=" + leader + ")";//兼容IE678
} else if (k === "zIndex") {
ele.style.zIndex = json[k];
} else {
ele.style[k] = json[k] + "px";
} }
clearInterval(ele.timer);
//所有程序执行完毕之后执行回调函数
//现在只有传递了回调函数，才能执行
if (fn) {
fn();
}
}
}, 25);
} //兼容方法获取元素样式
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</head>
<body>
<div class="box">
<div class="content" id="content">
<ul>
<li><a href="#"><img src="data:images/slidepic1.jpg"></a></li>
<li><a href="#"><img src="data:images/slidepic2.jpg"></a></li>
<li><a href="#"><img src="data:images/slidepic3.jpg"></a></li>
<li><a href="#"><img src="data:images/slidepic4.jpg"></a></li>
<li><a href="#"><img src="data:images/slidepic5.jpg"></a></li>
</ul>
<!--左右切换按钮-->
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>
JS——旋转木马的更多相关文章
- Js 旋转木马 轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
- jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...
- 旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
- 原生js 实现旋转木马
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- JS写一个旋转木马的视频播放效果
JS以及JQ的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...
随机推荐
- （15）MOG背景减少
1.根据上一帧找出变化的东西(如行走的人),消除背景,即不变的东西 motion detection 2.存在自身移动时的噪声和周围物体缓慢移动的噪声(这里播放的视频,我不断移动,背景可能有轻微的 ...
- java多线程编程核心技术（一）--多线程技能
1.进程和线程的概念 1.进程:进程是操作系统的基础,是一次程序的执行,是一个程序及其数据在处理机上顺序执行时所发生的活动,是程序在一个数据集合上运行的过程,他是系统进行资源分配和调度的一个独立单位. ...
- Mysql Innodb存储引擎 insert 死锁分析
http://chenzhenianqing.cn/articles/1308.html
- 1.7－BGP④
注意:默认路由ip route 0.0.0.0 0.0.0.0 12.1.1.1是不可以作为BGP邻居TCP始发连接的(但回包可以) 要配静态路由:ip route 13.1.1.3 255.255. ...
- 解决安装OpenShift Client Tools时提示的dl/import (LoadError)问题
安装成功Ruby和git以后.执行rhc setup时提演示样例如以下错误: C:/Ruby22-x64/lib/ruby/2.2.0/rubygems/core_ext/kernel_require ...
- Oracle Study之--Oracle 11gR2通过RMAN克隆数据库
Oracle Study之--Oracle 11gR2通过RMAN克隆数据库 Purpose of Database Duplication A duplicate database is usefu ...
- swift 2.0 语法 循环
//: Playground - noun: a place where people can play import UIKit /*: for循环 * 基本用法和OC一致 * 条件表达式必须是bo ...
- libcurl库进行http通讯-一些主要的函数
这里就简介一下libcurl的一些主要的函数. 调用curl_global_init()初始化libcurl 调用curl_easy_init()函数得到 easy interface型指针 调用cu ...
- HDOJ 题目2475 Box（link cut tree去点找祖先）
Box Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- socket实现web server
http://blog.csdn.net/u012734441/article/details/44801523 很好的一个例子,现在java程序原开发web服务端程序基本上都使用现成的web框架,这 ...