首页 > 代码库 > JS特效之很牛叉的轮播图

JS特效之很牛叉的轮播图

2024-11-20 07:44:39   202人阅读

//HTML部分:

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #2b7ec3 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #a5b2b9 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4663cc } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606; min-height: 22.0px } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #698906 } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66; min-height: 22.0px } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #d74200 } span.s4 { color: #48565d } span.s5 { color: #4a8a01 } span.s6 { color: #060606 } span.s7 { color: #e48b00 } span.s8 { color: #698906 } span.s9 { color: #4663cc } span.s10 { color: #289c97 } span.s11 { color: #ad42ef } span.s12 { color: #000000 } span.s13 { color: #a5b2b9 } span.s14 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>

<!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="http://www.mamicode.com/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部分:

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #698906 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #d74200 } span.s1 { color: #289c97 } span.s2 { color: #4f5d66 } span.s3 { color: #2b7ec3 } span.s4 { color: #929151 } span.s5 { color: #48565d } span.s6 { color: #ad42ef } span.s7 { color: #d16400 } span.s8 { color: #698906 } span.s9 { color: #d74200 } span.s10 { color: #4a8a01 }</style>

@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部分:

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #b58a00 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66; min-height: 22.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #e48b00 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4663cc } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #698906 } span.s1 { color: #4663cc } span.s2 { color: #e48b00 } span.s3 { color: #4f5d66 } span.s4 { color: #698906 } span.s5 { color: #ad42ef } span.s6 { color: #4a8a01 } span.s7 { color: #289c97 } span.s8 { color: #000000 } span.s9 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>

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];

}

}

JS特效之很牛叉的轮播图


联系
我们