219mze 发表于 2024-6-29 14:21:20

js+html实现简单的照片轮播


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.js代码</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">var index=0;
      function changeimg(){
      //获取要切换的<span style="color: black;">照片</span>
      var img=document.getElementById("img1");
      //计算到切换到那张<span style="color: black;">照片</span>
      var count=index%3+1;
      img.src="img/"+count+".jpg";
      //切换一个index+1
      index=index+1;
      }

      function init(){
      /*设置<span style="color: black;">照片</span>延时轮播函数*/
      setInterval("changeimg()",1000);
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>:<span style="color: black;">照片</span>路径进行更改</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">照片</span>数量<span style="color: black;">能够</span><span style="color: black;">增多</span>,五个最好</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.html代码</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;body onload="init()"&gt; &lt;!--//加载事件--&gt;
      &lt;img src="img/1.jpg" width="50%" height="50%" id="img1"&gt;
      &lt;/body&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">照片</span>的<span style="color: black;">体积</span><span style="color: black;">能够</span>设置为100%,我<span style="color: black;">这儿</span>是为了好看,设置的50%.</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ps:初次些这个,还有待改进,<span style="color: black;">期盼</span>多多支持</p>




流星的美 发表于 2024-9-8 19:54:30

太棒了、厉害、为你打call、点赞、非常精彩等。

4zhvml8 发表于 2024-9-26 13:47:39

你字句如珍珠，我珍藏这份情。

4lqedz 发表于 2024-10-1 05:24:55

楼主的文章非常有意义，提升了我的知识水平。

j8typz 发表于 2024-10-1 16:16:19

谷歌外链发布 http://www.fok120.com/

4zhvml8 发表于 2024-10-12 11:31:19

楼主果然英明！不得不赞美你一下！

1fy07h 发表于 2024-10-14 14:50:03

你的话语真是温暖如春，让我心生感激。

7wu1wm0 发表于 2024-10-19 14:50:35

顶楼主，说得太好了！

7wu1wm0 发表于 2024-10-30 03:39:39

系统提示我验证码错误1500次 ＼~゛，

nykek5i 发表于 2024-11-1 09:17:14

我赞同你的看法，你的智慧让人佩服，谢谢分享。
页: [1] 2
查看完整版本: js+html实现简单的照片轮播