JS特效之很牛叉的轮播图

Posted 2020-10-01 MrWwwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS特效之很牛叉的轮播图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>很牛叉的轮播图</title>

<!--[if lte IE 6]>

DD_belatedPNG.fix(‘span‘);

</script>

<![endif]-->

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>

</a>

</a>

<ul>

</ul>

</div>

</body>

</html>

//CSS部分:

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

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特效之很牛叉的轮播图的主要内容，如果未能解决你的问题，请参考以下文章

这周用到的圆形轮播插件 mislider.js

Jquery基础（动画效果的轮播图特效）

web前端设计必备网页特效案例 - 轮播图

原生JS面向对象思想封装轮播图组件

JS---part5 课程介绍 & part4 复习

HTML轮播图片代码，带解释