Xoay và hiển thị luân phiên các ảnh

No Comments

Tình cờ thấy hiệu ứng trên một trang hay hay sau đó mình đã viewcode để sưu tầm từ 2007.

Có vẽ như ngày này code này đã "lạc hậu" vì có cách viết khá đơn giản hơn và giửi quyết bằng css là đủ

<script type="text/javascript">

var chieu_ngang=200;

var chieu_doc=100;

var vien_ngoai=true;

var mau_vien="#cc00FF";

var toc_do=6;

var gk_dieu_khien=true;

var so_mat_phang=2;

hinh_anh=new Array(

"C:/WINDOWS/system32/oobe/images/newmark8.jpg","http://bendoi.vn",

"C:/WINDOWS/system32/oobe/images/monitor2.gif","",

"C:/WINDOWS/system32/oobe/images/oemcoa.jpg","",

"C:/WINDOWS/system32/oobe/images/wpakey.jpg","",

"C:/WINDOWS/system32/oobe/images/magnify.gif",""

);

hell=new Array(so_mat_phang/2+1);

cat=new Array(so_mat_phang/2);

gk=new Array(3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,0,Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);

var gkOf=so_mat_phang==4?0:so_mat_phang==6?2:so_mat_phang==8?5:9;

img_array=new Array(hinh_anh.length);

var goc=gk_dieu_khien?Math.PI/(so_mat_phang/2):0,gks=so_mat_phang,ngang_max,tong_so,dung=false,i,bu_trai,nua=so_mat_phang/2;

function chay_vong(){

if(document.getElementById){

for(i=0;i<hinh_anh.length;i+=2){

img_array[i]=new Image();img_array[i].src=hinh_anh[i]}

ngang_max=chieu_ngang/Math.sin(Math.PI/so_mat_phang)+nua+1;

Car_Div=document.getElementById("chay_vong");

for(i=0;i<nua;i++){

hell[i]=document.createElement("img");Car_Div.appendChild(hell[i]); hell[i].style.position="absolute";

hell[i].style.top=0+"px";

hell[i].style.height=chieu_doc+"px";

if(vien_ngoai){

hell[i].style.borderStyle="solid";

hell[i].style.borderWidth=1+"px";

hell[i].style.borderColor=mau_vien}

hell[i].src=hinh_anh[2*i];

hell[i].lnk=hinh_anh[2*i+1];

hell[i].onclick=duong_dan;

hell[i].onmouseover=dung_hinh;

hell[i].onmouseout=chay_lai}

nhung_hinh_anh()}}

function nhung_hinh_anh(){

if(!dung){

tong_so=0;

for(i=0;i<nua;i++){

cat[i]=Math.round(Math.cos(Math.abs(gk[gkOf+i]+goc))*chieu_ngang);

tong_so+=cat[i]}

bu_trai=(ngang_max-tong_so)/2;

for(i=0;i<nua;i++){

hell[i].style.left=bu_trai+"px";

hell[i].style.width=cat[i]+"px";

bu_trai+=cat[i]}

goc+=toc_do/720*Math.PI*(gk_dieu_khien?-1:1);

if((gk_dieu_khien&&goc<=0)||(!gk_dieu_khien&&goc>=Math.PI/nua)){

if(gks==hinh_anh.length)gks=0;

if(gk_dieu_khien){

hell[nua]=hell[0];

for(i=0;i<nua;i++)hell[i]=hell[i+1];

hell[nua-1].src=hinh_anh[gks];

hell[nua-1].lnk=hinh_anh[gks+1]}

else{for(i=nua;i>0;i--)hell[i]=hell[i-1];

hell[0]=hell[nua];

hell[0].src=hinh_anh[gks];

hell[0].lnk=hinh_anh[gks+1]}

goc=gk_dieu_khien?Math.PI/nua:0;gks+=2}}

setTimeout("nhung_hinh_anh()",50)}

function duong_dan(){if(this.lnk)window.location.href=this.lnk}

function dung_hinh(){this.style.cursor=this.lnk?"pointer":"default";dung=true;}

function chay_lai(){dung=false}

</script>

<body onload="chay_vong()">

<div id="chay_vong" style="position:relative"></div>





back to top