JS特效之很牛叉的轮播图
2021-06-09 19:05
标签：tomat script js特效 ret name get index position xhtml //HTML部分: 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">
>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>很牛叉的轮播图title>
link href="style.css" rel="stylesheet" type="text/css" />
script type="text/javascript" src="move.js">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
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
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
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];
}
}
};
>
>
>
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>
>
>