|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-4-24 11:48 编辑
素材：
img.zip
(390.46 KB, 下载次数: 30, 售价: 7 鱼币)
今天分享给鱼油们一个制作轮播图的极简方式。
由于是JS为主，页面部分源码不做解释：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
- <meta name="description" content="《零基础入门学习Web开发》案例演示">
- <meta name="author" content="鱼C工作室">
- <style>
- div{
- width:333px;
- height:auto;
- margin:auto;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div>
- <input type="button" value="下一张" onclick="changeImage()" />
- <img src="img/4.png" id="image" />
- </div>
- </body>
- </html>
实现效果：
其实轮播图很简单，就是：
好了，上面的定义已经把JS要干的事情叙述清楚了。
注意观察input元素中，有一个onclick属性，单击一次就会触发changeImage()方法。
changeImage（）方法就是轮播图的核心了，既然是切换图片，那么一定要知道图片在哪里切换。
没错，就是在img元素中，我们只要单击一次，切换src属性的值，那么图片就会切换了。
添加JS：
- <script>
- // 定义全局变量，用于切换图片
- var i=0;
- // 轮播
- function changeImage(){
- i++;
- // 获取img元素，动态修改src属性
- document.getElementById("image").src="img/"+i+".png";
- // 内置了4张图片，如果切换完成，置0
- if(i==4){
- i=0;
- }
- }
- </script>
好了，搞定～
优化
真正的轮播图是自动一张一张的切换图片，而不是靠手动点击。
所以我们这里要通过页面加载事件，让其自动执行，而是要设置好时间，比如多长时间开始间隔执行。
没错，就是用定时器，添加代码：
- // 通过页面加载事件，完成定时器轮播
- window.onload=function(){
- // 2s切换一次
- window.setInterval("changeImage()",2000);
- };
好了，轮播图的底层逻辑就是这样，有很多不同的优化，后续慢慢介绍～
最终代码：
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列Js帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-4-18 11:34:09
置顶卡
千斤顶
显身卡
发表于 2018-6-14 16:08:41
发表于 2019-3-13 20:14:02
