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的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...
随机推荐
- Swift 对象创建(PUT Object)过程详解——基于副本策略（一）
swift中创建对象,即PUT object,根据选定的存储策略将对象内容写入至相应的服务器(object server).我们重点关注object controller和object servers ...
- tomcat上传图片失败
今天,突然遇到个奇怪的问题,tomcat上传图片时好时坏,经查线上四台服务有一台服务器硬盘满了. 解决一下硬盘空间的问题,有好使了,那么图片上传通过流写到远程对象存储服务中,并没有落盘和硬盘满有哪些关 ...
- Ubuntu 16.04开机自动开启数字键盘NumLock
注意:以下方法不适合在登录时开启,只能是登录后开启.而且我经过测试之后会自动暗下去,但是不影响功能使用.这个是BUG的修复方法:https://askubuntu.com/questions/5090 ...
- Filter过滤器机制
tomcat内部过滤器采用了责任链的设计模式, Tomcat的过滤器主要由Filter.FilterChain组成,FilterChain包含一个Filter数组.当Wrapper执行FilterCh ...
- CString、char*与string的区别
三者的区别 CString 是MFC或者ATL中的实现: string 是C++标准库中的实现: char* 为C编程中最常用的字符串指针,一般以’\0’为结束标志. string和CString均是 ...
- LeetCode 720. Longest Word in Dictionary （字典里最长的单词）
Given a list of strings words representing an English Dictionary, find the longest word in words tha ...
- centos命令行安装mysql随机密码查看方法（遇到问题及其解决办法）
mysql初次命令行安装登录时报错: 未输入密码:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwo ...
- mybatis Generator生成代码及使用方式（转载）
转载自:http://www.cnblogs.com/fengzheng/p/5889312.html 文章很棒,很不错,转了.
- 一段shell脚本
//根据入参增加nginx反向代理#!/bin/bash#set -x log_path="./proc/logs/shellExecute.log"log_path_back=& ...
- 【线程安全】—— 单例类双重检查加锁（double-checked locking）
1. 三个版本单例类的实现 版本1:经典版 public class Singleton { public static Singleton getInstance() { if (instance ...