鱼C论坛

 找回密码
 立即注册
查看: 2644|回复: 17

[庖丁解牛] 0 2 2 5 ★ 坐看庭前#轮播图 |【原生极简】

[复制链接]
发表于 2018-4-18 11:34:09 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-4-24 11:48 编辑




                               
登录/注册后可看大图


素材: img.zip (390.46 KB, 下载次数: 30, 售价: 7 鱼币)

今天分享给鱼油们一个制作轮播图的极简方式。

由于是JS为主,页面部分源码不做解释:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  9.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  10.     <meta name="author" content="鱼C工作室">
  11.     <style>
  12.         div{
  13.             width:333px;
  14.             height:auto;
  15.             margin:auto;
  16.             text-align: center;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div>
  22.     <input type="button" value="下一张" onclick="changeImage()" />
  23.     <img src="img/4.png" id="image" />
  24. </div>
  25. </body>
  26. </html>
复制代码


实现效果:
Apr-18-2018 11-20-41.gif


其实轮播图很简单,就是:
在一个固定的位置,切换图片。


好了,上面的定义已经把JS要干的事情叙述清楚了。

注意观察input元素中,有一个onclick属性,单击一次就会触发changeImage()方法。

changeImage()方法就是轮播图的核心了,既然是切换图片,那么一定要知道图片在哪里切换。

没错,就是在img元素中,我们只要单击一次,切换src属性的值,那么图片就会切换了。

添加JS:
  1. <script>
  2. //    定义全局变量,用于切换图片
  3.     var i=0;
  4. //    轮播
  5.     function changeImage(){
  6.         i++;
  7. //        获取img元素,动态修改src属性
  8.         document.getElementById("image").src="img/"+i+".png";
  9. //        内置了4张图片,如果切换完成,置0
  10.         if(i==4){
  11.             i=0;
  12.         }
  13.     }
  14. </script>
复制代码


好了,搞定~




优化

真正的轮播图是自动一张一张的切换图片,而不是靠手动点击。

所以我们这里要通过页面加载事件,让其自动执行,而是要设置好时间,比如多长时间开始间隔执行。

没错,就是用定时器,添加代码:
  1. //    通过页面加载事件,完成定时器轮播
  2.     window.onload=function(){
  3. //        2s切换一次
  4.      window.setInterval("changeImage()",2000);
  5.     };
复制代码

Apr-18-2018 11-32-43.gif


好了,轮播图的底层逻辑就是这样,有很多不同的优化,后续慢慢介绍~

最终代码:
游客,如果您要查看本帖隐藏内容请回复



                               
登录/注册后可看大图








如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列Js帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-6-14 16:08:41 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-9 04:27:07 | 显示全部楼层
666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-3-13 20:14:02 | 显示全部楼层
php是世界上最好的语言
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-30 23:56:45 | 显示全部楼层
谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

头像被屏蔽
发表于 2020-4-3 14:55:59 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-7 22:57:02 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-8 10:42:37 | 显示全部楼层

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-20 10:36:25 | 显示全部楼层
0.0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-21 16:33:49 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-17 16:32:18 | 显示全部楼层
00
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-7-22 19:07:37 | 显示全部楼层
谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-24 22:53:55 | 显示全部楼层
yaokan
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-3-25 19:27:14 | 显示全部楼层
wow
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-17 21:24:33 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-1-18 16:07:36 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-10-13 13:41:04 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-11-20 17:11:29 | 显示全部楼层
喜欢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 12:58

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表