原生js图片轮番代码

最新推荐文章于 2025-04-20 16:47:23 发布

elena_0117

最新推荐文章于 2025-04-20 16:47:23 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/elena20170326/article/details/73854309

版权

js 专栏收录该内容

4 篇文章

订阅专栏

<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>图片自动切换</title>  
</head>  
<style>  
body{margin:100px;}  
p,img,div,ul,li { margin:0;padding:0;}  
#content { width:600px; height:400px; border:1px solid #F00; position:relative;overflow:hidden;}  
#img1 { position:absolute;top:0;left:0;}  
#img2 { position:absolute;top:0;left:600px;}  
#intro {width:600px; height:60px; position:absolute; top:340px; left:0;}  
p { width:600px; height:60px; background:#333; opacity:0.5; position:absolute;}  
span {display:block; width:600px; height:60px; line-height:60px; text-align:center; color:#fff; position:absolute; z-index:2;}  
</style>  
<script>  
/*  
两个图片位置变换，同时把数组里的图片地址赋予图片  
*/  
  
  
window.onload = function(){  
var intro = document.getElementById('intro');  
var oSpan = intro.getElementsByTagName('span')[0];  
var oP = intro.getElementsByTagName('p')[0];  
var img1 = document.getElementById('img1');//图片1  
var img2 = document.getElementById('img2');//图片2  
var oUl = document.getElementsByTagName('ul')[0];  
var arr = ['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg']; //图片地址  
var timer1 = null;  
var timer2 = null;  
var timer3 = null;  
//初始化  
var n = 0;  
var a = 0;  
var b = 1;  
intro.style['top'] = '400px';  
oSpan.innerHTML = '图片说明'+(n+1);  
img1.src = arr[a];  
img2.src = arr[b];  
  
timer1 = setInterval(changeImg,3000);  
timer3 = setInterval(autoText,30);  
function changeImg(){  
clearInterval(timer2);  
clearInterval(timer3);  
intro.style['top'] = '400px';  
timer2 = setInterval(autoPic,30);  
timer3 = setInterval(autoText,30);  
n++;  
n%=arr.length;  
oSpan.innerHTML = '图片说明'+(n+1);  
};  
  
function autoPic(){  
var length1 = parseInt(getStyle(img1,'left'))-10;  
var length2 = parseInt(getStyle(img2,'left'))-10;  
img1.style['left'] = length1+'px';  
img2.style['left'] = length2+'px';  
  
if(length1==-600){  
a+=2;  
if(a>=arr.length)a-=arr.length;  
img1.style['left'] = '600px';  
img1.src = arr[a];  
clearInterval(timer2);   
}  
if(length2== -600){  
b+=2;  
if(b>=arr.length)b-=arr.length;  
img2.style['left'] = '600px';  
img2.src = arr[b];  
clearInterval(timer2);  
}   
};   
function autoText(){  
var height = parseInt(getStyle(intro,'top'))-2;  
intro.style['top'] = height +'px';  
if(height<=340)clearInterval(timer3);  
};  
function getStyle(obj,str){return obj.currentStyle?obj.currentStyle[str]:getComputedStyle(obj)[str];};  
};  
</script>  
   
<body>  
<div id="content">  
<img id="img1" />  
<img id="img2" />  
<div id="intro">  
<span></span>  
<p></p>   
</div>  
</div>  
</body>  
</html>