zoukankan html css js c++ java

HTML——JAVASCRIPT练习题——图片轮播

方法一：

<!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>
<title>无标题文档</title>
<style type="text/css">
#tu
{
    400px;
    float:left;

}
#a,#b,#c,#d,#e,#f,#g
{
    500px;
    height:350px;
    float:left;
    float:left;
}
</style>

</head>
<body>
<div id="tu">
<img id="a" src="207.jpg" style="display:block"/>
<img id="b" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/>
<img id="c" src="1.gif" style="display:none"/>
<img id="d" src="3-1.jpg" style="display:none"/>
<img id="e" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
<img id="f" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/>
<img id="g" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
</div>
</body>
<script type="text/javascript">
var jihe=new Array();
jihe[0]=document.getElementById("a");
jihe[1]=document.getElementById("b");
jihe[2]=document.getElementById("c");
jihe[3]=document.getElementById("d");
jihe[4]=document.getElementById("e");
jihe[5]=document.getElementById("f");
jihe[6]=document.getElementById("g");

var n=0;
function change()
{
     n++;
        if(n==0)
        {
            jihe[0].style.display="block";
            jihe[1].style.display="none";
            jihe[2].style.display="none";
            jihe[3].style.display="none";
            jihe[4].style.display="none";
            jihe[5].style.display="none";
            jihe[6].style.display="none";

        }
        else if(n==1)
        {
            jihe[0].style.display="none";    
            jihe[1].style.display="block";
            jihe[2].style.display="none";
            jihe[3].style.display="none";
            jihe[4].style.display="none";
            jihe[5].style.display="none";
            jihe[6].style.display="none";
        }
        else if(n==2)
        {
            jihe[0].style.display="none";    
            jihe[1].style.display="none";
            jihe[2].style.display="block";
            jihe[3].style.display="none";
            jihe[4].style.display="none";
            jihe[5].style.display="none";
            jihe[6].style.display="none";
        }
        else if(n==3)
        {
            jihe[0].style.display="none";    
            jihe[1].style.display="none";
            jihe[2].style.display="none";
            jihe[3].style.display="block";
            jihe[4].style.display="none";
            jihe[5].style.display="none";
            jihe[6].style.display="none";
        }
        else if(n==4)
        {
            jihe[0].style.display="none";    
            jihe[1].style.display="none";
            jihe[2].style.display="none";
            jihe[3].style.display="none";
            jihe[4].style.display="block";
            jihe[5].style.display="none";
            jihe[6].style.display="none";
        }
        else if(n==5)
        {
            jihe[0].style.display="none";    
            jihe[1].style.display="none";
            jihe[2].style.display="none";
            jihe[3].style.display="none";
            jihe[4].style.display="none";
            jihe[5].style.display="block";
            jihe[6].style.display="none";
        }
        else if(n==6)
        {
            jihe[0].style.display="none";    
            jihe[1].style.display="none";
            jihe[2].style.display="none";
            jihe[3].style.display="none";
            jihe[4].style.display="none";
            jihe[5].style.display="none";
            jihe[6].style.display="block";
        }
        else
        {
            n=0;
        }
        window.setTimeout("change()",3000);

}
window.setTimeout("change()",3000);
</script>
</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">
#tu
{
    400px;
    float:left;

}
#a,#b,#c,#d,#e,#f,#g
{
    500px;
    height:350px;
    float:left;
    float:left;
}
</style>
</head>
<body>
<div id="tu">
<img id="a" src="042815_Nano_468_605.jpg" style="display:block"/>
<img id="b" src="RadArt1_922.jpg" style="display:none"/>
<img id="c" src="zebrafish-522_0.jpg" style="display:none"/>
<img id="d" src="Wheat-original_605.jpg" style="display:none"/>
<img id="e" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
<img id="f" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/>
<img id="g" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
</div>
</body>
<script type="text/javascript">
var jihe=new Array();
jihe[0]=document.getElementById("a");
jihe[1]=document.getElementById("b");
jihe[2]=document.getElementById("c");
jihe[3]=document.getElementById("d");
jihe[4]=document.getElementById("e");
jihe[5]=document.getElementById("f");
jihe[6]=document.getElementById("g");

var n=0;
function change()
{
     n++;
        if(n==7)
        {
            n=0;
        }
        
        hideall(jihe);
        jihe[n].style.display="block";
        
        window.setTimeout("change()",3000);
    
}
function hideall(a)
{
    for(var i=0;i<7;i++)
    {
        a[i].style.display="none";
    }
}
window.setTimeout("change()",3000);
</script>

</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>
</head>

<body>
<div id="d" style="background-image:url(3-1.jpg); height:200px; 200px;"></div>
</body>
<script type="text/javascript">
var img=new Array();
img[0]="url(042815_Nano_468_605.jpg)";
img[1]="url(RadArt1_922.jpg)";
img[2]="url(zebrafish-522_0.jpg)";
img[3]="url(TFMW20150411_Yale_0022_NEW_Rotator.jpg)";
img[4]="url(t01ba56e06b53e9d8ba.jpg)";

var n=0;
function change()
{
    if(n==4)
    {
        n=0;    
    }    
    else
    {
        n++;    
    }
    document.getElementById("d").style.backgroundImage=img[n];
    window.setTimeout("change()",2000);
}
window.setTimeout("change()",2000);

</script>
</html>

查看全文

相关阅读:
solr
2.配置Flutter代码编辑器(IDE)
1.Flutter的下载安装和环境配置
 ReactNative开发环境配置,新手踩坑必备.我也是新手
 汉字转拼音,获取汉字首字母
 For循环性能优化
 JavaScript滑块简易取色器
 C# 获取汉字拼音首字母（修正X问题,真正修正）
团队项目-个人博客5.31
团队项目-个人博客5.30

原文地址：https://www.cnblogs.com/SJP666/p/4704346.html