如何在JS滚动图片中加上左右箭头

JavaScript010

如何在JS滚动图片中加上左右箭头,第1张

前后分别设置一个伪元素

<!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>

这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。

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

<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>