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的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...
随机推荐
- linux 卸载php mysql apache
卸载Mysql 1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql 可以看到mysql的包: mysql-3.23.58-9php-mysql-4.3.4-11mod_a ...
- docker国内镜像拉取和镜像加速registry-mirrors配置修改
docker国内镜像拉取和镜像加速registry-mirrors配置修改 学习了:http://blog.csdn.net/u014231523/article/details/61197945 站 ...
- uva 10716 Evil Straw Warts Live(贪心回文串)
这道题目我用了一上午才做出来,还是看的别人的思路,尽管没有看代码做的有点慢.代码能力还是得加强啊.思维 得缜密.不能想当然,要有根据,写上的代码要有精确度.省的以后还得慢慢调试 思路:贪心.每次都查看 ...
- Linux内核之于红黑树and AVL树
为什么Linux早先使用AVL树而后来倾向于红黑树? 实际上这是由红黑树的有用主义特质导致的结果,本短文依旧是形而上的观点.红黑树能够直接由2-3树导出.我们能够不再提红黑树,而仅仅提2- ...
- research plan
- open_basedir restriction in effect，解决php引入文件权限问题 lnmp
1.配置了虚拟域名 vim /usr/local/nginx/conf/vhost/siemens.conf server { listen 80; #listen [::]:80 default_s ...
- RAID5配置及服务器2003系统安装方法。2000系统的安装要使用7.9版本的引导盘
服务器2003系统安装方法.2000系统的安装要使用7.9版本的引导盘 RAID5配置: 1.为新到的惠普DL380服务器装系统,首先要配置RAID阵列. 如下图进行配置. 启动到如上图阶段,按F8. ...
- 【POJ 3784】 Running Median
[题目链接] http://poj.org/problem?id=3784 [算法] 对顶堆算法 要求动态维护中位数,我们可以将1-M/2(向下取整)小的数放在大根堆中,M/2+1-M小的数放在小根堆 ...
- JSP-Runoob：JSP 点击量统计
ylbtech-JSP-Runoob:JSP 点击量统计 1.返回顶部 1. JSP 点击量统计 有时候我们需要知道某个页面被访问的次数,这时我们就需要在页面上添加页面统计器,页面访问的统计一般在用户 ...
- android api level对应表(copy)
Platform Version API Level VERSION_CODE Notes Android 4.4 19 KITKAT Platform Highlights Android 4.3 ...