Question

求js用箭头控制图片轮滚原理，图片不是固定张数。求有代码的详细注释！！！！原理，实现原理，谢谢各位

Answer 1

js可以检测到键盘按下的事件，所有每次键盘按下的时候判断是什么键，在这之前要初始一些值

<style>
#lb{width:500px;height:300px;}
#lb img{position:absolute;left:500px;top:0;width:100%;height:100%;}
#lb img.active{left:0}
</style>

<div id="lb">
<img src="xxx.jpg" class="active">
<img src="xxx.jpg">
<img src="xxx.jpg">
</div>

<script>

//图片滚动到第几的一张
var index = 0;
//这里要获取图片对象
var imgObj= document.getElementsByTagName("img");
//获取图片数量
var length = imgObj.length;
//默认值为0,此变量用了记录上一张的索引
var par = 0;

//键盘下线时候触发的函数
window.onkeydown = function(e){
if(e.keyCode == 37){
leftFun(); //左箭头按下调用左边滚动函数
}else if(e.keyCode == 39){
rightFun (); //右箭头调用右边滚动函数
}
};

//往左边滚动的调用函数
var leftFun = function(){
index--;
if(index<0) index = length -1;
animate(index);
};

//往右边滚动的调用函数
var rightFun = function(){
index++;
if(index>length) index = 0;
animate(index);
};

//执行滚动的动画函数。
var animate= function(i){
//这里面就你自己写了代码比较多
}
</script>

追问

你好！麻烦你把代码补充完整嘛！animate(index);这句是什么意思啊？补充完整必采纳。万分感谢，因为对于这方面的知识实在懂得不多，想串联起来了解下。

追答

index就是对应的图片的索引，也就是第几的一张图片，索引是从0开始的，所以index=0 那就是第一张图片 index=1就是第二张图片以此类推

追问

//执行滚动的动画函数。
var animate= function(i){
//这里面就你自己写了代码比较多
}
可以麻烦你把里面的补充好吗？

//执行滚动的动画函数。
var animate= function(i){
//这里面就你自己写了代码比较多
}
可以麻烦你把里面的补充好吗？

追答

用了jquery库的动画，那个jquery.js你不用去看了，只要套用得来他的动画函数就行。其它的都是用了最简便的方式