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的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...
随机推荐
- [K/3Cloud]DBServiceHelper.ExecuteDataSet(this.Context, sql)) 返回数据问题
例如下面代码: int sQty = 0; string sql = string.Format(@" Select FMATERIALID ,FBASEUNITID ,FAUXPROPID ...
- 【Tomcat】Tomcat替换猫的图片
参考:网页title上添加图片 直接替换Tomcat安装目录下ROOT下面的favicon.ico图标(名字与前面一样favicon.ico)
- 夜话JAVA设计模式之代理模式（Proxy）
代理模式定义:为另一个对象提供一个替身或者占位符以控制对这个对象的访问.---<Head First 设计模式> 代理模式换句话说就是给某一个对象创建一个代理对象,由这个代理对象控制对原对 ...
- Eclipse安装Properties插件来编辑中文
一.在线安装 输入这个地址:http://propedit.osdn.jp/eclipse/updates/ 二.离线安装 在官网上下载最新版本:https://zh.osdn.net/project ...
- Hadoop2.0之开启日志
配置 修改 mapred-site.xml <property> <name>mapreduce.jobhistory.address</name> <val ...
- 进程同步与相互排斥：POSIX有名信号量
在 POSIX 标准中,信号量分两种,一种是无名信号量,一种是有名信号量. 无名信号量一般用于线程间同步或相互排斥,而有名信号量一般用于进程间同步或相互排斥. 它们的差别和管道及命名管道的差别类似.无 ...
- luogu2346 四子连棋
题目大意 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白色棋子,7颗黑色棋子,有两个空白地带,任何一颗黑白棋子都可以向上下左右四个方向移动到相邻的空格,这叫行棋一步,黑白双方交替走棋,任意一方可以 ...
- oc78--NSFileManager
// main.m // NSFileManager #import <Foundation/Foundation.h> int main(int argc, const char * a ...
- 一些SQL高级函数
一些SQL高级函数 Posted on 2010-08-08 21:34 moss_tan_jun 阅读(311) 评论(0) 编辑 收藏 长度与分析用 datalength(Char_expr) 返 ...
- IDEA Spark Streaming 操作(RDD队列流)
import org.apache.spark.SparkConf import org.apache.spark.rdd.RDD import org.apache.spark.streaming. ...