图片轮播系列1-旋转木马
——使用JS原生数组方式实现
今天分享的是图片轮播,这是一个系列,后续会更新。使用JS原生数组方式实现的比较简单的图片轮播。
效果展示:
步骤:
1、准备数据(图片)2、使用工具: IDE是WebStorm3、代码如下:
<script> //文档加载完毕后 window.οnlοad= function () { //获取向上按钮a标签 var oPrev=document.getElementById("prev"); //获取向下按钮a标签 var oNext=document.getElementById("next"); //获取span标签 var oSpan=document.getElementById("span"); //获取img标签 var oImg=document.getElementById("img"); //img标签的src属性的值设置为一个数组 var arrUrl=["images/威尼斯1.jpg","images/威尼斯2.jpg","images/斯特丹1.jpg","images/斯特丹2.jpg"]; //创建一个数为0,数组的下标从0开始 var num=0; //初始化 function oTab(){ //显示第一张图片 oImg.src=arrUrl[num]; //动态显示 oSpan.innerHTML="1/4"; oSpan.innerHTML=num+1+"/"+arrUrl.length; } //初始化调用 oTab(); //向上的点击事件 oNext.οnclick= function () { num++; if(num =0){ // oImg.src=arrUrl[num]; // oSpan.innerHTML=num+1+"/"+arrUrl.length; oTab(); } }; }; </script>