<div class="banner" id="banner">
<div class="slider" id="slider">
<ul>
<li><a href="javascript:"></a></li>
<li><a href="javascript:"></a></li>
<li><a href="javascript:"></a></li>
<li><a href="javascript:"></a></li>
<li><a href="javascript:"></a></li>
</ul>
<div class="btn" id="btn">
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
*{margin: 0; padding: 0; }
ul{list-style: none; }
a{ outline: none; text-decoration: none; }
img{ border: 0; vertical-align: top; }
body{
background-color: black;
}
.banner{
width: 1200px;
margin: 200px auto;
}
.slider{
height: 300px;
position: relative;
}
.slider li{
position: absolute;
left: 200px;
top: 0;
}
.slider li img{
width: 100%;
}
.btn{
opacity: 0;
position: relative;
z-index: 100;
}
.left,.right{
width:39px;height:79px;
background:url(../images/left_right.png) no-repeat;
cursor:pointer;
position:absolute;
top:0;
margin-top:100px;
z-index: 99;
}
.left{
left: 40px;
background-position:-17px -10px;
}
.right{
right: 40px;
background-position:-64px -10px;
}
window.onload = function(){
var banner = document.getElementById("banner");
var slider = document.getElementById("slider");
var lis = slider.getElementsByTagName("li");
var btn = document.getElementById("btn");
banner.onmouseover = function(){
animate(btn,{opacity:100})
};
banner.onmouseout = function(){
animate(btn,{opacity:0})
};
var json = [{width:400,top:20,left:50,opacity:20,zIndex:2},
{width:600,top:60,left:0,opacity:60,zIndex:3},
{width:800,top:100,left:200,opacity:100,zIndex:4},
{width:600,top:60,left:600,opacity:60,zIndex:3},
{width:400,top:20,left:750,opacity:20,zIndex:2}];
change();
var jieliu = true;
var btns = btn.children;
for(var key in btns){
btns[key].onclick = function(){
if(this.className == "left"){
if(jieliu == true){
change(true);
jieliu = false;
}
}else if(this.className == "right"){
if(jieliu == true){
change(false);
jieliu = false;
}
}
}
}
function change(flag){
if(flag){
json.unshift(json.pop());
}else{
json.push(json.shift());
}
for(var i=0;i<json.length;i++){
animate(lis[i],{
width:json[i].width,
top:json[i].top,
left:json[i].left,
opacity:json[i].opacity,
zIndex:json[i].zIndex
},function(){jieliu = true})
}
}
};
function $(id){ // 获取 id
return document.getElementById(id);
}
// 屏幕到上和到右距离（兼容）
function scroll(){
if(window.pageXOffset != null){ // ie9 +
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{ // 怪异模式
return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
}
// 屏幕宽高（兼容）
function client(){
if(window.innerWidth != null){ // ie9 +
return {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}else{ // 怪异模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
// 匀速动画 右走
function animate1(obj,speed,target){
obj.timer = setInterval(function(){
if(obj.offsetLeft>target){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},50)
}
// 匀速动画可左可右
function animate2(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft - target < 0 ? 10 : -10;
obj.timer = setInterval(function(){
var run = target - obj.offsetLeft;
if(Math.abs(run)<=10){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed +"px";
}
},30)
}
// 缓动向右动画
function animate3(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetLeft)/10;
console.log(speed);
speed = speed>0?Math.ceil(speed) :Math.floor(speed);
obj.style.left = obj.offsetLeft + speed +"px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},50)
}
// 获取样式属性（兼容）
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
// 缓动动画 任何方向
function animate4(obj,attr,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cus = parseInt(getStyle(obj,attr));
var speed = (target - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == target){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
},30)
}
// 缓动动画 传多个属性
function animate5(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var cus = parseInt(getStyle(obj,attr));
var speed = (json[attr] - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == json[attr]){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
}
},30)
}
// 缓动动画 传多个属性 + 回调
function animate6(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = parseInt(getStyle(obj,attr));
var speed = (json[attr] - leader)/10;
speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
obj.style[attr] = leader + speed + "px";
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},20)
}
// 缓动动画 多个属性 + 回调 + 透明度 + zindex
function animate(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = 0;
if(attr == "opacity"){
leader = parseInt(getStyle(obj,attr)*100);
}else{
leader = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - leader)/10;
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if(attr == "opacity"){
obj.style.opacity = (leader + speed)/100;
}else if(attr == "zIndex"){
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = leader + speed + "px";
}
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},20)
}
