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的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...
随机推荐
- UVa - 12451 - Let's call SPaDe a SPaDe
先上题目: Problem H: Let's call SPaDe a SPaDe Passing time, walking the passage, as you pass the String ...
- tyvj2059 元芳看电影
描述 神探狄仁杰电影版首映这天,狄仁杰.李元芳和狄如燕去看电影.由于人实在是太多了,入场的队伍变得十分不整齐,一个人的前面可能会出现并排的好多人.“元芳,这队伍你怎么看?”“大人,卑职看不出这队伍是怎 ...
- 简单解决 WIN10更新后 远程桌面提示 CredSSP加密Oracle修正的问题
更新WIN10后,打开远程桌面,提示: 以 管理员身份打开 cmd或者PowerShell,贴入: REG ADD HKLM\Software\Microsoft\Windows\CurrentVer ...
- 最全Pycharm教程（37）——Pycharm版本号控制之基础篇
1.主题 介绍Pycharm的版本号控制系统 2.准备工作 (1)Pycharm版本号为2.7或者更高 (2)已经创建一个project.參见Getting Started tutorial (3)安 ...
- 【转】MySQL随机字符串生成
DROP FUNCTION IF EXISTS rand_string; DELIMITER $$ CREATE FUNCTION rand_string(str_length TINYINT UNS ...
- LeetCode 234. Palindrome Linked List （回文链表）
Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...
- Qt 开发程序后的公布问题
Qt 开发程序后的公布问题 Qt 是一套跨平台 C++ 图形用户界面应用程序开发框架,利用它能够很方便的开发各种类型的应用程序.可是随着 Qt 的发展.功能越来越强大,公布时须要文件也越来越多.公布时 ...
- node.js下操作cookie
cookie,又是cookie.工作中与cookie打交道很多次,不过时间跨度也大,每总结多一次,就加深了解多一点. cookie,一定是放在浏览器中的,用于浏览器保存一些小额度的内容.每次我们去访问 ...
- PHP正则表达式-从文本中提取URL
1.从文本中提取URL的正则表达式 '/https?:\/\/[\w-.%#?\/\\\]+/i'
- Codeforces--633D--Fibonacci-ish （map+去重）（twice）
Fibonacci-ish Time Limit: 3000MS Memory Limit: 524288KB 64bit IO Format: %I64d & %I64u Su ...