天涯论坛

 找回密码
 立即注册
搜索
查看: 121|回复: 10

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

[复制链接]

2995

主题

220

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99099158
发表于 2024-6-29 14:21:20 | 显示全部楼层 |阅读模式

1.js代码

var index=0; function changeimg(){ //获取要切换的照片 var img=document.getElementById("img1"); //计算到切换到那张照片 var count=index%3+1; img.src="img/"+count+".jpg"; //切换一个index+1 index=index+1; } function init(){ /*设置照片延时轮播函数*/ setInterval("changeimg()",1000); }

重视:照片路径进行更改

照片数量能够增多,五个最好

2.html代码

<body onload="init()"> <!--//加载事件--> <img src="img/1.jpg" width="50%" height="50%" id="img1"> </body>

照片体积能够设置为100%,我这儿是为了好看,设置的50%.

ps:初次些这个,还有待改进,期盼多多支持





上一篇:HTML+CSS案例:淘宝轮播图
下一篇:一本让你对CSS彻底学通透的书籍---《CSS的经典设计指南3》pdf
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-8 19:54:30 | 显示全部楼层
太棒了、厉害、为你打call、点赞、非常精彩等。
回复

使用道具 举报

3123

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108625
发表于 2024-9-26 13:47:39 | 显示全部楼层
你字句如珍珠,我珍藏这份情。
回复

使用道具 举报

2946

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979427
发表于 2024-10-1 05:24:55 | 显示全部楼层
楼主的文章非常有意义,提升了我的知识水平。
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-10-1 16:16:19 | 显示全部楼层
谷歌外链发布 http://www.fok120.com/
回复

使用道具 举报

3123

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108625
发表于 2024-10-12 11:31:19 | 显示全部楼层
楼主果然英明!不得不赞美你一下!
回复

使用道具 举报

3048

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109040
发表于 2024-10-14 14:50:03 | 显示全部楼层
你的话语真是温暖如春,让我心生感激。
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-10-19 14:50:35 | 显示全部楼层
顶楼主,说得太好了!
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-10-30 03:39:39 | 显示全部楼层
系统提示我验证码错误1500次 \~゛,
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-11-1 09:17:14 | 显示全部楼层
我赞同你的看法,你的智慧让人佩服,谢谢分享。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 01:57 , Processed in 0.123531 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.