*************************************************************图片轮播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>