来源：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 代码写进~ 标签中   2)外部引入 创建一个 x.js的文件然后用src把文件引入进来 那么今天就到这了~ 小伙伴们自己来试试吧~ 我是萌新娜娜 立志做一个不翻车的老司机 学习Java的路上请多多指教 扩展阅读 史上最全的Javascript面试题总结 JavaScript入门写一个表单校验功能 Javascript 将 HTML 页面生成 PDF 并下载

微信公众号：javafirst

扫码关注免费获取更多资源