马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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
