JS特效之很牛叉的轮播图
//HTML部分:
p.p1 { margin: 0; font: 19px Consolas; color: rgba(40, 156, 151, 1) }
p.p2 { margin: 0; font: 19px Consolas; color: rgba(43, 126, 195, 1) }
p.p3 { margin: 0; font: 19px Consolas; color: rgba(79, 93, 102, 1) }
p.p4 { margin: 0; font: 19px Consolas; color: rgba(165, 178, 185, 1) }
p.p5 { margin: 0; font: 19px Consolas; min-height: 22px }
p.p6 { margin: 0; font: 19px Consolas; color: rgba(70, 99, 204, 1) }
p.p7 { margin: 0; font: 19px Consolas; color: rgba(6, 6, 6, 1); min-height: 22px }
p.p8 { margin: 0; font: 19px Consolas; color: rgba(6, 6, 6, 1) }
p.p9 { margin: 0; font: 19px Consolas; color: rgba(105, 137, 6, 1) }
p.p10 { margin: 0; font: 19px Consolas; color: rgba(79, 93, 102, 1); min-height: 22px }
span.s1 { color: rgba(79, 93, 102, 1) }
span.s2 { color: rgba(43, 126, 195, 1) }
span.s3 { color: rgba(215, 66, 0, 1) }
span.s4 { color: rgba(72, 86, 93, 1) }
span.s5 { color: rgba(74, 138, 1, 1) }
span.s6 { color: rgba(6, 6, 6, 1) }
span.s7 { color: rgba(228, 139, 0, 1) }
span.s8 { color: rgba(105, 137, 6, 1) }
span.s9 { color: rgba(70, 99, 204, 1) }
span.s10 { color: rgba(40, 156, 151, 1) }
span.s11 { color: rgba(173, 66, 239, 1) }
span.s12 { color: rgba(0, 0, 0, 1) }
span.s13 { color: rgba(165, 178, 185, 1) }
span.s14 { color: rgba(181, 138, 0, 1) }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>很牛叉的轮播图</title>
<!–[if lte IE 6]>
<script src=”js/DD_belatedPNG_0.0.8a.js” type=”text/javascript”></script>
<script type=”text/javascript”>
DD_belatedPNG.fix(\’span\’);
</script>
<![endif]–>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”move.js”></script>
<script>
window.onload = function(){
var oPrevDiv = document.getElementsByClassName(\’prev_div\’)[0];
var oNextDiv = document.getElementsByClassName(\’next_div\’)[0];
var aLi = document.getElementsByTagName(\’li\’);
var arr = [];
for(var i=0;i<aLi.length;i++){
var oImg = aLi[i].getElementsByTagName(\’img\’)[0];
arr.push( [ parseInt(getStyle(aLi[i],\’left\’)),parseInt(getStyle(aLi[i],\’top\’)),getStyle(aLi[i],\’opacity\’)*100,getStyle(aLi[i],\’zIndex\’) , oImg.width ] );
}
//console.dir(arr);
oPrevDiv.onclick = function(){ //左
arr.push(arr[0]);
arr.shift();
for(var i=0;i<aLi.length;i++){
var oImg = aLi[i].getElementsByTagName(\’img\’)[0];
aLi[i].style.zIndex = arr[i][3];
startMove(aLi[i],{left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2] });
startMove( oImg,{ width : arr[i][4] } );
}
};
oNextDiv.onclick = function(){ //右
arr.unshift(arr[arr.length–1]);
arr.pop();
for(var i=0;i<aLi.length;i++){
var oImg = aLi[i].getElementsByTagName(\’img\’)[0];
aLi[i].style.zIndex = arr[i][3];
startMove(aLi[i],{left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2] });
startMove( oImg,{ width : arr[i][4] } );
}
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
};
</script>
</head>
<body>
<div id=”automatic”>
<div class=”prev_div”></div>
<a class=”prev” href=”###”>
<span class=“ico1”></span>
<span class=“ico”></span>
<span class=“txt”></span>
</a>
<div class=”next_div”></div>
<a class=”next” href=”###”>
<span class=“ico1”></span>
<span class=“ico”></span>
<span class=“txt”></span>
</a>
<ul>
<li class=”pos_0″><a href=”#”><img src=”images/8.jpg” width=”100″ alt=””/></a></li>
<li class=”pos_1″><a href=”#”><img src=”images/1.jpg” width=”270″ alt=””/></a></li>
<li class=”pos_2″><a href=”#”><img src=”images/2.jpg” width=”510″ alt=””/></a></li>
<li class=”pos_3″><a href=”#”><img src=”images/3.jpg” width=”680″ alt=””/></a></li>
<li class=”pos_4″><a href=”#”><img src=”images/4.jpg” width=”510″ alt=””/></a></li>
<li class=”pos_5″><a href=”#”><img src=”images/5.jpg” width=”270″ alt=””/></a></li>
<li class=”pos_6″><a href=”#”><img src=”images/6.jpg” width=”270″ alt=””/></a></li>
<li class=”pos_6″><a href=”#”><img src=”images/7.jpg” width=”270″ alt=””/></a></li>
</ul>
</div>
</body>
</html>
//CSS部分:
p.p1 { margin: 0; font: 19px Consolas; color: rgba(105, 137, 6, 1) }
p.p2 { margin: 0; font: 19px Consolas; color: rgba(165, 178, 185, 1) }
p.p3 { margin: 0; font: 19px Consolas; min-height: 22px }
p.p4 { margin: 0; font: 19px Consolas; color: rgba(74, 138, 1, 1) }
p.p5 { margin: 0; font: 19px Consolas; color: rgba(79, 93, 102, 1) }
p.p6 { margin: 0; font: 19px Consolas; color: rgba(215, 66, 0, 1) }
span.s1 { color: rgba(40, 156, 151, 1) }
span.s2 { color: rgba(79, 93, 102, 1) }
span.s3 { color: rgba(43, 126, 195, 1) }
span.s4 { color: rgba(146, 145, 81, 1) }
span.s5 { color: rgba(72, 86, 93, 1) }
span.s6 { color: rgba(173, 66, 239, 1) }
span.s7 { color: rgba(209, 100, 0, 1) }
span.s8 { color: rgba(105, 137, 6, 1) }
span.s9 { color: rgba(215, 66, 0, 1) }
span.s10 { color: rgba(74, 138, 1, 1) }
@charset “utf-8”;
/* CSS Document */
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
body { background: #ececec; padding-top: 50px; }
#automatic { width: 970px; height: 344px; position: relative; margin: 0 auto; overflow: hidden; }
.prev_div { width: 130px; height: 72px; position: absolute; top: 128px; left: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; }
.next_div { width: 130px; height: 72px; position: absolute; top: 128px; right: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; }
#automatic .prev { width: 120px; height: 72px; position: absolute; top: 108px; left: 72px; z-index: 4; }
#automatic .prev .ico { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev.png); }
#automatic .prev .ico1 { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev_1.png); z-index: 2; filter: alpha(opacity=0); opacity: 0; }
#automatic .prev .txt { width: 106px; height: 112px; position: absolute; top: 0; left: 65px; background: url(images/prev_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; }
#automatic .next { width: 120px; height: 72px; position: absolute; top: 108px; right: 72px; z-index: 4; }
#automatic .next .ico { width: 76px; height: 112px; position: absolute; top: 0; right: 0; background: url(images/next.png) no-repeat; }
#automatic .next .ico1 { width: 76px; height: 112px; position: absolute; top: 0; right: 0px; background: url(images/next_1.png) no-repeat; z-index: 2; filter: alpha(opacity=0); opacity: 0; }
#automatic .next .txt { width: 106px; height: 112px; position: absolute; top: 0; right: 65px; background: url(images/next_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; }
#automatic ul { width: 970px; height: 344px; position: absolute; top: 0; left: 0; z-index: 1; }
#automatic li { position: absolute; }
#automatic .line { border: 4px solid #fff; width: 672px; height: 336px; position: absolute; top: 0; left: 50%; margin-left: -340px; z-index: 3; }
#automatic .pos_0 { top: -104px; left: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; }
#automatic .pos_1 { top: 104px; left: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; }
#automatic .pos_2 { top: 43px; left: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; }
#automatic .pos_3 { top: 0; left: 145px; z-index: 4; }
#automatic .pos_4 { top: 43px; right: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; }
#automatic .pos_5 { top: 104px; right: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; }
#automatic .pos_6 { top: -104px; right: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; }
//js部分:
p.p1 { margin: 0; font: 19px Consolas; color: rgba(181, 138, 0, 1) }
p.p2 { margin: 0; font: 19px Consolas; color: rgba(79, 93, 102, 1); min-height: 22px }
p.p3 { margin: 0; font: 19px Consolas; color: rgba(79, 93, 102, 1) }
p.p4 { margin: 0; font: 19px Consolas; color: rgba(228, 139, 0, 1) }
p.p5 { margin: 0; font: 19px Consolas; color: rgba(74, 138, 1, 1) }
p.p6 { margin: 0; font: 19px Consolas; color: rgba(40, 156, 151, 1) }
p.p7 { margin: 0; font: 19px Consolas; color: rgba(70, 99, 204, 1) }
p.p8 { margin: 0; font: 19px Consolas; color: rgba(105, 137, 6, 1) }
span.s1 { color: rgba(70, 99, 204, 1) }
span.s2 { color: rgba(228, 139, 0, 1) }
span.s3 { color: rgba(79, 93, 102, 1) }
span.s4 { color: rgba(105, 137, 6, 1) }
span.s5 { color: rgba(173, 66, 239, 1) }
span.s6 { color: rgba(74, 138, 1, 1) }
span.s7 { color: rgba(40, 156, 151, 1) }
span.s8 { color: rgba(0, 0, 0, 1) }
span.s9 { color: rgba(181, 138, 0, 1) }
span.Apple-tab-span { white-space: pre }
function startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
var iCur = 0;
if(attr == \’opacity\’){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}
var iSpeed = (json[attr] – iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}
if(attr == \’opacity\’){
obj.style.filter = \’alpha(opacity=\’ +(iCur + iSpeed)+ \’)\’;
obj.style.opacity = (iCur + iSpeed)/100;
}
else{
obj.style[attr] = iCur + iSpeed + \’px\’;
}
}
if(bBtn){
clearInterval(obj.timer);
if(endFn){
endFn.call(obj);
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}