这篇文章主要介绍怎么使用js实现图片轮播效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
专注于为中小企业提供成都做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业屯昌免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
只有img标签的html代码,做测试用:
<body> <img src="images/class1-1.jpg" id="img"> </body>
下面是js代码:
var k=0; //当前的索引 var ss = new Array(); //数组,用来存放图片 ss[0] = "images/class1-1.jpg"; ss[1] = "images/class1-2.jpg"; ss[2] = "images/class1-3.jpg"; ss[3] = "images/class1-4.jpg"; function scrollPic(){ if(k>ss.length-1){ //如果当前函数超过数组下标的最大值,k=0 k=0; } for(var i=0;i<ss.length;i++){ //遍历数组 if(i==k){ //如果当前索引等于当前数组下标 document.getElementById("img").src=ss[i]; //改变图片路径 } } k++; //k++,执行下一次操作 } setInterval("scrollPic()",1000); //设置定时器
以上是“怎么使用js实现图片轮播效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文标题:怎么使用js实现图片轮播效果
标题网址:https://www.cdcxhl.com/article28/isjdjp.html
成都网站建设公司_创新互联,为您提供App开发、手机网站建设、建站公司、网站收录、营销型网站建设、移动网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联