JavaScript 图片轮播

ASP.NET 社区

2.25/5 (3投票s)

2013 年 10 月 11 日

CPOL

1分钟阅读

21348

两个简单的例子，用 JavaScript 创建图片轮播

引言

有很多方法可以在 JavaScript 中创建图片轮播。这里，我编写了两个简单的例子，用 JavaScript 创建图片轮播。

第一个程序

步骤 1

首先，我们使用 <img> 标签创建一个图像 (img1)，并将其放置在 <body> 标签中。

<body onload="show()">
  <img id="img1" width="120px" />
</body>

注意：这里我们在 onload 事件中调用一个 JavaScript 函数 show()。

第二步

在 <head> 标签中创建一个 JavaScript 函数 show()。

<script language='javascript'>
function show()
{
    document.getElementById('img1').src="Water lilies.jpg";
    setTimeout("show2()",1000);
}

function show2()
{
    document.getElementById('img1').src="Winter.jpg";
    setTimeout("show3()",1000);
}

function show3()
{
    document.getElementById('img1').src="Sunset.jpg";
    setTimeout("show4()",1000);
}

function show4()
{
    document.getElementById('img1').src="Blue hills.jpg";
    setTimeout("show()",1000);
}
</script>

这里我们使用 getElementById 获取图像的 Id (img1) (getElementById() 方法访问具有指定 id 的元素)，并设置 img1 的源 (src)。这里，我们创建许多函数，并使用 JavaScript 的 setTimeout 方法调用它们。

第二个程序

这里，我们根据特定表格的 onmouseover 事件设置图像，并根据它设置图像及其描述。

步骤 1

首先，我们在 <body> 标签中创建一个表格，并在表格行中设置一个图像 (img1) 和多个 <p> 标签。

<table style="border:1px solid Black">
  <tr>
    <td>
      <table>
          <tr>
            <td>
              <img id="img1" src="Sunset.jpg"  width="120px" />
            </td>
          </tr>
        <tr>
          <td>
            <p id="pmain"> </p>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table style="width:140px">
        <tr>
          <td id="td1" align="center" style="border:1px solid Black" 
          onmouseover="show1()" onmouseout="hide1()">
            <p id="p1">Image1</p>
          </td>
        </tr>
        <tr>
          <td id="td2"  align="center"  style="border:1px solid Black" 
          onmouseover="show2()" onmouseout="hide2()">
            <p id="p2">Image2</p>
          </td>
        </tr>
        <tr>
          <td id="td3"  align="center"  style="border:1px solid Black" 
          onmouseover="show3()" onmouseout="hide3()">
            <p id="p3">Image3</p>
          </td>
        </tr>
        <tr>
          <td id="td4"  align="center"  style="border:1px solid Black" 
          onmouseover="show4()" onmouseout="hide4()">
            <p id="p4">Image4</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这里，我们在 onmouseover 和 onmouseout 事件上设置样式并调用函数。

第二步

在 <head> 标签中创建 JavaScript 函数。

<script language='javascript'>
function show1()
{
    document.getElementById('img1').src="Winter.jpg";
    document.getElementById("p1").style.fontStyle="italic";
    document.getElementById("td1").style.background="Red";
    document.getElementById("pmain").innerHTML="Image1";
}

function hide1()
{
    document.getElementById("p1").style.fontStyle="normal";
    document.getElementById("td1").style.background="White";
    document.getElementById("pmain").innerHTML="";
}

function show2()
{
    document.getElementById('img1').src="Sunset.jpg";
    document.getElementById("p2").style.fontStyle="italic";
    document.getElementById("td2").style.background="Red";
    document.getElementById("pmain").innerHTML="Image2";
}

function hide2()
{
    document.getElementById("p2").style.fontStyle="normal";
    document.getElementById("td2").style.background="White";
    document.getElementById("pmain").innerHTML="";
}

function show3()
{
    document.getElementById('img1').src="Water lilies.jpg";
    document.getElementById("p3").style.fontStyle="italic";
    document.getElementById("td3").style.background="Red";
    document.getElementById("pmain").innerHTML="Image3";
}

function hide3()
{
    document.getElementById("p3").style.fontStyle="normal";
    document.getElementById("td3").style.background="White";
    document.getElementById("pmain").innerHTML="";
}

function show4()
{
    document.getElementById('img1').src="Blue hills.jpg";
    document.getElementById("p4").style.fontStyle="italic";
    document.getElementById("td4").style.background="Red";
    document.getElementById("pmain").innerHTML="Image4";
}

function hide4()
{
    document.getElementById("p4").style.fontStyle="normal";
    document.getElementById("td4").style.background="White";
    document.getElementById("pmain").innerHTML="";
}
</script>

这里，我们使用 id 设置图像 (img1) 的源属性，并根据 id 设置 <td> 和 <p> 标签的样式以及 <p> 标签的 innerHTML 属性。

这里，我们使用 getElementById 获取 id。getElementById() 方法访问具有指定 id 的元素。