图片轮播

*************************************************************图片轮播js封装库**********************************************************************

function getStyle(obj,attr){

if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,null)[attr];
} 
}
function startMove(obj,iTarget,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if(attr == 'opacity'){
lWidth = parseFloat(getStyle(obj,attr)) * 100; //0.3  30
var speed = (iTarget - lWidth) / 30;   //数值越大，速度越慢
}else{
lWidth = parseInt(getStyle(obj,attr));
var speed = (iTarget - lWidth) / 8;
}
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(lWidth == iTarget){
clearInterval(obj.timer);
}else{
if(attr == 'opacity'){
obj.style[attr] = (lWidth +  speed) / 100;
}else{
obj.style[attr] = lWidth + speed + 'px';
}
}
},30)

}

******************************************************************************图片轮播javascript页面1***************************************************************************

<script type="text/javascript">
var n = 0;
var timer = null;
var contents = document.getElementById('contents');
var imgs = contents.getElementsByTagName('li');
var listnum = document.getElementById('listnum').getElementsByTagName('li');
for(var i = 0; i < imgs.length; i++){
listnum[i].index = i;
listnum[i].onmouseover = function(){
startMove(contents,this.index*-170,'top')
for(var j = 0; j < listnum.length; j++){
listnum[j].className = '';
}
this.className = 'on';
}
}
timer = setInterval(function(){
n++;
if(n > imgs.length-1){
n = 0
}
startMove(contents,n*-170,'top')
for(var j = 0; j < listnum.length; j++){
listnum[j].className = '';
}
listnum[n].className = 'on';
},2000);
/*
function focusimg(){
if((imgs.length-1) * -170 == n){
n = 0;
}else{
n-=170;
}
startMove(contents,n,'top');
for(var i = 0; i < imgs.length; i++){
listnum[i].className = '';
}
listnum[n/-170].className = 'on';
}
for(var j = 0; j < listnum.length; j++){
listnum[j].index = j;
listnum[j].onmouseover = function(){
clearInterval(timer);
n = (this.index-1) * -170;
focusimg();
}
listnum[j].onmouseout = function(){
timer = setInterval(focusimg,2000);
}
}
timer = setInterval(focusimg,2000);

*/
</script>

******************************************************************************图片轮播javascript页面2***************************************************************************

<script>
var n = 0;
var z = 1;
var timer = null;
var contents = document.getElementById('contents');
var imgs = contents.getElementsByTagName('li');
var listnum = document.getElementById('listnum').getElementsByTagName('li');
for(var i = 0; i < imgs.length; i++){
listnum[i].index = i;
listnum[i].onmouseover = function(){
imgs[this.index].style.opacity = 0;
startMove(imgs[this.index],100,'opacity');
imgs[this.index].style.zIndex = z++;
for(var j = 0; j < listnum.length; j++){
listnum[j].className = '';
}
this.className = 'on';
}
}
</script>