JavaScript模拟轮播图效果
来源：Java联盟
轮播图
相信小伙伴们应该不会陌生吧~
就是网站中间的那个
会定时切换的商品图
今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~
那么咱们开动了，额~先准备好几章轮播图片（直接在网上找的壁纸~φ(>ω<*) ）我们先来个手动版的过度一下~
实现步骤：
1）根据id获取元素
document.getElementById("")
2）每点击一次按钮我们就修改一次元素的src属性的值
document.getElementById("").src=
代码：
看一下效果：
这个效果需要我们点击下面的按钮才能实现图片切换~下面我们来升级一下，把这个效果变成自动的~
自动的就需要用到定时器了，在JavaScript对象中的window下面有一个 setInterval() 方法。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
分析步骤：
1）确定事件（onload）绑定函数
2）获取元素的src属性并修改值
3）设置定时器，运行函数
代码：
div{
border:1pxsolid white;
width:600px;
height:400px;
margin: auto;
text-align: center;
}
functioninit(){
//设置定时器
window.setInterval("changeImg()",3000);
}
vari=1;
functionchangeImg(){
i++;
//获取图片位置设置src属性
document.getElementById("img").src="img/"+ i%3+".jpg";
}
效果和上面的一样~咱们就不给大家演示了~注意要修改一下图片的路径哈~（其实在实际的项目开发中~轮播图不是这么干的~所以领会精神哈~）
JavaScript的引入方式
和CSS一样，JavaScript也是有引用方式的~
1）内部引入
就像上边的代码一样把 js 代码写进~
<script type="text/javascript"></script>标签中
2)外部引入
创建一个 x.js的文件然后用src把文件引入进来
<script type="text/javascript" src=“x.js”></script>
那么今天就到这了~
小伙伴们自己来试试吧~
我是萌新娜娜
立志做一个不翻车的老司机
学习Java的路上请多多指教
扩展阅读
Javascript 将 HTML 页面生成 PDF 并下载
微信公众号：javafirst
扫码关注免费获取更多资源