JavaScript快速实现自动轮播 |
您所在的位置:网站首页 › 唱歌应该怎么发声好听点儿呢视频讲解 › JavaScript快速实现自动轮播 |
大家在逛网页的时候,经常会看到轮播图的出现。尤其是电商网页,一般主页就是一个大的轮播图。那么这种轮播图要怎么实现呢,这个实现方法是多种多样的,具体要看自己怎么喜欢。 先上效果图,还是蜡笔小新主题的,不过这次不需要自己移动鼠标: 这个还是比较简单的一种,没有什么花样。 接下来就来带大家完成这个轮播图,先是html代码: 自动轮播图 *{ margin: 0px; padding: 0px; } #image{ margin: 10px auto; width: 1080px; display: block; }代码比较简单,主体(body)里面就一个img标签,上面的样式也就是设置居中。接下来讲一下JavaScript代码,具体代码的作用我就写注释里面了: window.onload = function () { //创建图片路径数组 var imgs = Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"); //获取图片元素 var image = document.getElementById("image"); //计算,用来辅助轮播 var i = 0; //设置定时器,每50毫秒运行一次 setInterval(function () { //判断是否越界,为越界就i++进入下一张图片 if(i |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |