JS做图片滑动

在界面中做一个关于图片左右滑动的效果。

循环切换,可从最后一张右滑到第一张,从第一张左滑到最后一张

设置两个按钮

<a id="prev" href="javascript:;"><</a>

<a id="next" href="javascript:;">></a>

图片

<img id="img1" />

js代码,获取id,把图片放入一个数组

设定初始函数,图片显示为数组的第一个。

然后做按钮判断

左滑时--到数组的下标为-1时显然不存在,此时把num改成数组长度减1,则显示为数组最后一个

右滑则相反。

<script type="text/javascript">
window.onload = function(){
var aprev = document.getElementById("prev");
var anext = document.getElementById("next");
var b = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
var oimg=document.getElementById("img1");
var num=0;
function start(){
oimg.src=b[num];
}
start();
aprev.onclick = function(){
num--;
if(num==-1){
num==b.length-1;
}
start();
}
  aprev.onclick = function(){
num++;
if(num==b.length){
num==0;
}
start();
}
}
</script>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值