0 2 2 5 ★ 坐看庭前#轮播图 |【原生极简】
本帖最后由 不二如是 于 2018-4-24 11:48 编辑上一篇：0 2 2 4 ★ 确认过眼神，#三招儿让JQ变成对的人
static/image/hrline/2.gif
素材：
今天分享给鱼油们一个制作轮播图的极简方式。
由于是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);
};
好了，轮播图的底层逻辑就是这样，有很多不同的优化，后续慢慢介绍～
最终代码：
**** Hidden Message *****
static/image/hrline/2.gif
下一篇：0 2 2 6 ★ JavaScript'快速的爱情小孩' | 【quickie love-child 】
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列Js帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
{:5_91:} 666 php是世界上最好的语言{:10_256:} 谢谢 {:10_277:} 和
0.0 {:10_243:} 00 谢谢 yaokan wow 1
1 1 喜欢
页:
[1]