js的特效？
日期：2014-05-17 浏览次数：20715 次
求一个js的特效？？
想用js做出，图片每隔2秒就轮换一次，
效果的网站，但是它的是向右边每隔2秒轮换一次，我是想让图片向上或者向轮换，求js代码
http://yule.kugou.com/news/
------解决方案--------------------
<script>
function init(){
setInterval("doChangeImage()",1000);//调节时间多久换一次
}
var ind = 1;//记录当前已显示的图片的编号
//改变广告图片
function doChangeImage(){
ind++;//2
if(ind>3){
ind = 1;
}
for(var i = 1; i <= 3; i++){//循环查找img标签
var img = document.getElementById("img"+i);
if(i==ind){//显示
img.style.display="block";
}else{//隐藏
img.style.display="none";
}
}
}
</script>
</HEAD>
<BODY onload="init();">
<div>
<img id="img1" src="images/zhaopin1.jpg" style="display:block">
<img id="img2" src="images/zhaopin2.jpg" style="display:none">
<img id="img3" src="images/zhaopin3.jpg" style="display:none">
</div>
</BODY>
------解决方案--------------------
额 你的连接好多图片 不知道是哪个啊
<!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>
<style type="text/css">
img{
width:400px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
var imges=document.images;
for(var i=0;i<imges.length;i++){
imges[i].style.top=parseInt(imges[i].style.top)-4+"px";
if(parseInt(imges[i].style.top)==-800){
imges[i].style.top="400px";
}
}
var p=window.setTimeout(init,50);
for(var i=0;i<imges.length;i++){
if(parseInt(imges[i].style.top)==-400){
window.clearTimeout(p);
rechange();
}
}
}
function rechange(){
window.setTimeout(init,2000);
}
window.onload=init;
</script>
</head>
<body>
<div style="position:absolute; width:400px; height:400px; overflow:hidden">
<img src="1.jpg" style="position:absolute; left:0px; top:0px;"><br>
<img src="2.jpg" style="position:absolute; left:0px; top:400px;"><br>
<img src="3.jpg" style="position:absolute; left:0px; top:800px;">
</div>
</body>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
img{
width:400px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
var imges=document.images;
for(var i=0;i<imges.length;i++){
imges[i].style.left=parseInt(imges[i].style.left)-4+"px";
if(parseInt(imges[i].style.left)==-800){
imges[i].style.left="400px";
}
}
var p=window.setTimeout(init,50);
for(var i=0;i<imges.length;i++){
if(parse
想用js做出，图片每隔2秒就轮换一次，
效果的网站，但是它的是向右边每隔2秒轮换一次，我是想让图片向上或者向轮换，求js代码
http://yule.kugou.com/news/
------解决方案--------------------
<script>
function init(){
setInterval("doChangeImage()",1000);//调节时间多久换一次
}
var ind = 1;//记录当前已显示的图片的编号
//改变广告图片
function doChangeImage(){
ind++;//2
if(ind>3){
ind = 1;
}
for(var i = 1; i <= 3; i++){//循环查找img标签
var img = document.getElementById("img"+i);
if(i==ind){//显示
img.style.display="block";
}else{//隐藏
img.style.display="none";
}
}
}
</script>
</HEAD>
<BODY onload="init();">
<div>
<img id="img1" src="images/zhaopin1.jpg" style="display:block">
<img id="img2" src="images/zhaopin2.jpg" style="display:none">
<img id="img3" src="images/zhaopin3.jpg" style="display:none">
</div>
</BODY>
------解决方案--------------------
额 你的连接好多图片 不知道是哪个啊
<!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>
<style type="text/css">
img{
width:400px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
var imges=document.images;
for(var i=0;i<imges.length;i++){
imges[i].style.top=parseInt(imges[i].style.top)-4+"px";
if(parseInt(imges[i].style.top)==-800){
imges[i].style.top="400px";
}
}
var p=window.setTimeout(init,50);
for(var i=0;i<imges.length;i++){
if(parseInt(imges[i].style.top)==-400){
window.clearTimeout(p);
rechange();
}
}
}
function rechange(){
window.setTimeout(init,2000);
}
window.onload=init;
</script>
</head>
<body>
<div style="position:absolute; width:400px; height:400px; overflow:hidden">
<img src="1.jpg" style="position:absolute; left:0px; top:0px;"><br>
<img src="2.jpg" style="position:absolute; left:0px; top:400px;"><br>
<img src="3.jpg" style="position:absolute; left:0px; top:800px;">
</div>
</body>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
img{
width:400px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
var imges=document.images;
for(var i=0;i<imges.length;i++){
imges[i].style.left=parseInt(imges[i].style.left)-4+"px";
if(parseInt(imges[i].style.left)==-800){
imges[i].style.left="400px";
}
}
var p=window.setTimeout(init,50);
for(var i=0;i<imges.length;i++){
if(parse
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
