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. 网易轮播图
<!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>
* {
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<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.旋转轮播图
<!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>
* {
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<lis.length;i++) {
animate(lis[i],json[i],function () {
// 回调函数,修改控制动画的标记
flag = true;
});
}
}
}