JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图
1. JS封装运动框架
// 多个属性运动框架 添加回调函数
function animate(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
// console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
// alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},30)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
2. 网易轮播图
- 效果图
- 算是原理图吧
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易轮播图</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/myJS.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
<div class="slider" id="slider">
<div class="slider-main" id="slider_mian">
<div class="slider-mian-img"><a href="javascript:;"><img src="images/1.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-pre"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
- CSS
* {
margin: 0;
padding: 0;
}
img {
vertical-align: bottom;
}
.box {
width: 310px;
height: 270px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider {
width: 100%;
height: 220px;
background-color: red;
}
.slider-ctrl {
text-align: center;
}
.slider-ctrl-con {
display: inline-block;
width: 35px;
height: 20px;
background: url("../images/icon.png") no-repeat -24px -782px;
margin: 10px 0 0 5px;
cursor: pointer;
text-indent: 99em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}
.slider-ctrl-pre,
.slider-ctrl-next {
position: absolute;
top: 50%;
margin-top: -35px;
display: inline-block;
width: 30px;
height: 34px;
background: url("../images/icon.png") no-repeat;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-pre {
left: 0;
background-position: 5px top;
}
.slider-ctrl-next {
right: 0;
background-position: -4px -45px;
}
.slider-main {
width: 200%;
height: 100%;
background-color: orange;
}
.slider-mian-img {
position: absolute;
left: 0;
top: 0;
}
- JavaScript
window.onload = function () {
var slider = $("slider");
var slider_mian = $("slider_mian"); // 存放图片的盒子
var slider_main_imgs = slider_mian.children; // 图片数组
var slider_ctrl = $("slider_ctrl"); // pageControl
var slider_ctrls = slider_ctrl.children;
// 加载pageontrol
for (var i=0;i<slider_main_imgs.length;i++) {
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = slider_main_imgs.length - i;
slider_ctrl.insertBefore(span,slider_ctrls[1]);
}
slider_ctrl.children[1].className = "slider-ctrl-con current";
for (var i=1;i<slider_main_imgs.length;i++) {
slider_main_imgs[i].style.left = slider.offsetWidth + "px";
}
// 添加点击事件
var showIndex = 0;
for (var index in slider_ctrls) {
slider_ctrls[index].onclick = function () {
if (this.className == "slider-ctrl-pre") { // 点击了左按钮
animate(slider_main_imgs[showIndex],{left:slider.offsetWidth});
showIndex--;
if (showIndex < 0) {
showIndex = slider_main_imgs.length - 1;
}
slider_main_imgs[showIndex].style.left = -slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:0});
} else if (this.className == "slider-ctrl-next") { // 点击了右按钮
autoPlay();
} else { // 其他按钮
// alert(showIndex);
var willShow = this.innerHTML - 1;
if (willShow > showIndex) { // 点击了正在展示图片的右侧按钮
// 将要显示的图片立刻定位到右面
slider_main_imgs[willShow].style.left = slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth}); // 当前图片慢慢走出去
animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来
showIndex = willShow;
} else if (willShow < showIndex) {
// 将要显示的图片立刻定位到左面
slider_main_imgs[willShow].style.left = -slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:slider.offsetWidth}); // 当前的图片慢慢走出去
animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来
showIndex = willShow;
}
}
pageControl();
}
}
// pageControl变化
function pageControl() {
for (var i=1;i<=slider_ctrls.length - 2;i++) {
slider_ctrls[i].className = "slider-ctrl-con";
}
slider_ctrls[showIndex + 1].className = "slider-ctrl-con current";
}
// 开启定时器
var timer = null;
timer = setInterval(autoPlay,3000);
function autoPlay() {
animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth});
showIndex++;
if (showIndex > slider_main_imgs.length - 1) {
showIndex = 0;
}
slider_main_imgs[showIndex].style.left = slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:0});
pageControl();
}
// 清除定时器
$("js_box").onmouseover = function () {
clearInterval(timer);
}
$("js_box").onmouseout = function () {
clearInterval(timer);
timer = setInterval(autoPlay,3000);
}
}
2.旋转轮播图
- 效果图
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/myJS.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
<div class="slider" id="js_slider">
<ul>
<li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic6.jpg" alt=""></a></li>
</ul>
</div>
<div class="arrow" id="js_arrow">
<a href="javascript:;" class="pre"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</body>
</html>
- CSS
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.slider {
width: 1200px;
height: 600px;
margin: 100px auto;
position: relative;
}
ul {
width: 100%;
height: 100%;
}
ul li {
position: absolute;
top: 100px;
left: 200px;
}
ul li img {
width: 100%;
}
.arrow {
width: 100%;
background-color: orange;
opacity: 0;
position: absolute;
top: 50px;
}
.pre,.next {
width: 76px;
height: 112px;
position: absolute;
background: url("../images/prev.png") no-repeat;
top: 0;
}
.pre {
left: 0;
}
.next {
right: 0;
background: url("../images/next.png") no-repeat;
}
- JavaScript
window.onload = function () {
var arrow = $("js_arrow"); // 左右按钮的盒子,整体控制左右按钮的显示与隐藏
var box = $("js_box");
var lis = $("js_slider").children[0].children; // 图片集合
var pre = arrow.children[0]; // 左按钮
var next = arrow.children[1]; // 右按钮
box.onmouseover = function () {
animate(arrow,{opacity:100});
}
box.onmouseout = function () {
animate(arrow,{opacity:0});
}
// 存储了每个图片的信息
var json = [
{ // 1
width:400,
top:20,
left:50,
opacity:20,
zIndex:2
},
{ // 2
width:550,
top:70,
left:0,
opacity:80,
zIndex:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
zIndex:4
},
{ // 4
width:550,
top:70,
left:600,
opacity:80,
zIndex:3
},
{ //5
width:400,
top:20,
left:750,
opacity:20,
zIndex:2
},
{ //6
width:350,
top:0,
left:425,
opacity:10,
zIndex:1
}
];
var flag = true; // 控制动画的标记
change();
pre.onclick = function () {
if (flag == true) { // flag为true时才可以做动画
json.push(json.shift()); // 交换json
flag = false; // 立即将flag修改为false,来控制动画
change();
}
}
next.onclick = function () {
if (flag == true) {
json.unshift(json.pop());
flag = false;
change();
}
}
function change() {
for (var i=0;i<lis.length;i++) {
animate(lis[i],json[i],function () {
// 回调函数,修改控制动画的标记
flag = true;
});
}
}
}
JS封装动画框架,网易轮播图,旋转轮播图的更多相关文章
- JS封装运动框架（另一种写法）
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...
- js动画框架设计
当你不再依赖JQuery时,当你已经厌倦了引入js类库实现一些动画效果的方式,当你想实现一个简单而实用的动画框架......下面介绍下愚人设计的动画框架:支持动画缓动算法函数,如Linear.Cubi ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 第一百五十五节，封装库--JavaScript，轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
随机推荐
- CTFlearn Inj3ction Time --sql注入python多线程脚本练习
0x00前言: 本题是国外的一个CTF平台的题目,题目不难,但学习了波多线程payload写法 先看题目描述,提示"union是个有用的命令",估计是用联合查询就能出答案的(因为前 ...
- iOS 11开发教程（二十二）iOS11应用视图实现按钮的响应(2)
iOS 11开发教程(二十二)iOS11应用视图实现按钮的响应(2) 此时,当用户轻拍按钮后,一个叫tapButton()的方法就会被触发. 注意:以上这一种方式是动作声明和关联一起进行的,还有一种先 ...
- HTTP那些事儿
一.HTTP和HTTPSHTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS.HTTP是超文本传输协议,信息是明文传输 ...
- 深度学习中 droupout层是咋回事？？
参考这篇博文 博主写的非常好! https://blog.csdn.net/program_developer/article/details/80737724 参考这篇博文 博主写的非常好! ...
- GCC&&GDB在OI中的介绍
序言 这本来是用Word写的,但是后来我换了系统所以只能用markdown迁移然后写了...... $\qquad$本文主要投食给那些在Windows下活了很久然后考试时发现需要用命令行来操作时困惑万 ...
- BZOJ 4405 [wc2016]挑战NPC 带花树 一般图最大匹配
https://www.lydsy.com/JudgeOnline/problem.php?id=4405 这道题大概就是考场上想不出来,想出来也调不出来的题. 把每个桶拆成三个互相有边的点,每个球向 ...
- Codeforces.842D.Vitya and Strange Lesson(Trie xor)
题目链接 /* 异或只有两种情况,可以将序列放到01Tire树上做 在不异或的情况下在Tire上查找序列的mex很容易,从高位到低位 如果0位置上数没有满,则向0递归:否则向1 (0位置上的数都满了 ...
- memcached 一致性哈希算法
本文转载自:http://blog.csdn.net/kongqz/article/details/6695417 一.概述 1.我们的memcache客户端使用了一致性hash算法ketama进行数 ...
- react-native基础教程(1)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/ React ...
- .net core程序中使用微软的依赖注入框架
我之前在博文中介绍过Asp.net core下系统自带的依赖注入框架,这个依赖框架在Microsoft.Extensions.DependencyInjection中实现,本身并不是.net core ...