<style>
#lb{width:500pxheight:300px}
#lb img{position:absoluteleft:500pxtop:0width: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>
前后分别设置一个伪元素
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:400px
height:250px
border: 1px solid #ff1943
}
div {
width: 400px
height:250px
position: relative
}
div:hover:before{
content:"<"
display:block
width:30px
height:60px
background:rgba(0,0,0,.3)
position:absolute
top:40%
left:0px
text-align:center
line-height:60px
font-size:30px
color:#fff
}
div:hover:after{
content:">"
display:block
width:30px
height:60px
background:rgba(0,0,0,.3)
position:absolute
top:40%
right:-1px
text-align:center
line-height:60px
font-size:30px
color:#fff
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<script>
window.onload = function() {
var mying = new Array("1.jpg","2.jpg","3.jpg")
var i = 0
var tupian = document.getElementsByTagName("img")[0]
setInterval(changeimg,2000)
function changeimg() {
tupian.setAttribute("src",mying[i++])
if(i == mying.length) {
i=0
}
}
}
</script>
</body>
</html>
这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。
