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. 网易轮播图
网易轮播图
* { 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;} 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 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.旋转轮播图
旋转木马轮播图
* { 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;} 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 
