轮播图
写轮播图之前我们要认识到几个问题：
一、什么是轮播图？
二、怎么实现轮播效果？
三、轮播图还有什么小功能可以实现？
那好我们先理解一下什么是轮播图：
一、什么是轮播图：能够实现多张图片循环出现效果的我们称之为轮播图。
例如：
上图就是轮播图，图片中两张图片正在替换着出现。
二、怎么实现轮播效果？
要实现轮播图的效果有很多种方法，比如css3、框架、JavaScript等。
而今天我们要看的是我个人觉得最简单的一种方法，即使是初学者也可以看懂并理解的方法，我们先来看下代码：
<body>
<!-- 插入图片并设置图片的大小 -->
</body>
<script>
var tu=document.getElementById("tu"); //获取到id
var x=1; //定义一个变量x
function bian(){ //定义一个叫bian的function方法
x=x+1; //让变量每次加一
if (x>6){x=1} //判断当播放到最后一张是切换到第一张
tu.src="img/"+x+".jpg"; //替换id为tu的src （因为这里要换图片所以要用到变量x，所以这里要用字符拼接）
}
setInterval(bian,1000); //给bian这个方法加上定时器时间为1000毫秒 </script>
在上面的html中我们可以看到这个方法是通过src途径的图片命名更改来实现轮播效果的，那么这里的限制就比较多，例如：图片的格式可能会不同、每张图片都必须进行有规律的命名等。
但是这对于初学者而言是比较好的一中方式，能让他们在通过简单的代码来实现这样的一个效果，更能激发他们学习的欲望。
三、轮播图还有什么小功能可以实现？
其他小功能包括：左右的按钮的点击切换，图片下小圆点的点击切换以及自动切换
这些小功能的实现我们明天继续学习！
网友评论