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

JavaScript012

如何在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>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>无标题页</title>

<script type="text/javascript" src="http://www.suqian.cm/js/ScrollPic.js"></script>

</head>

<body>

<style type="text/css">

.pic_top div{float:left}

.pic_yi{height:80pxwidth:80pxpadding:20px}

</style>

<div class="pic_top">

<div class="pic_left" id="LeftArr" style="height:100pxwidth:200px">鼠标点击向左（left）滚动</div>

<div class="pic_center" id="divAcrollPic1" style=" height:100pxwidth:400pxoverflow:hidden">

<div class="pic_yi">图片</div>

<div class="pic_yi">图片</div>

<div class="pic_yi">图片</div>

<div class="pic_yi">图片</div>

</div>

<div class="pic_right" id="RightArr" style="height:100pxwidth:200px">鼠标点击向右（right）滚动</div>

</div>

<script type="text/javascript">

// 左右点击滚动开始

var scrollPic1 = new ScrollPic()

scrollPic1.scrollContId = "divAcrollPic1"//内容容器ID

scrollPic1.arrLeftId = "LeftArr"//左箭头ID

scrollPic1.arrRightId = "RightArr"//右箭头ID

scrollPic1.frameWidth = 400//显示框宽度

scrollPic1.pageWidth = 100//翻页宽度

scrollPic1.speed = 10//移动速度(单位毫秒，越小越快)

scrollPic1.space = 10//每次移动像素(单位px，越大越快)

scrollPic1.autoPlay = false//自动播放

scrollPic1.autoPlayTime = 3//自动播放间隔时间(秒)

scrollPic1.initialize()//初始化

// 左右点击滚动结束

</script>

</body>

</html>

jQuery写的，在文本框获得焦点时可通过左右方向键来增减月份值：

HTML：

<!DOCTYPE html>

<html>

<head>

  <meta charset='utf-8'>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

  <input type="text" id="dateBox" />

</body>

</html>

JS：

var date = new Date()

// 初始化日期的日、时、分、秒为0，避免闰年等引起的跳月问题

// （例如当前日期是2012-01-31，如果不置日为0，则按下右键时会直接跳到3月）

date.setDate(0)

date.setHours(0, 0, 0, 0)

function numFormat(num){

  return (num <10 ? '0' : '') + num

}

function showDate(){

  $('#dateBox').val(date.getFullYear() + '-' + numFormat(date.getMonth() + 1))

}

showDate()    // 初始化显示

// 绑定键盘事件响应

$('#dateBox').keydown(function(e){

  if (e.which == 37){

    // 左方向键

    date.setMonth(date.getMonth() - 1)

    e.preventDefault()

  } else if(e.which == 39) {

    // 右方向键

    date.setMonth(date.getMonth() + 1)

    e.preventDefault()

  }

      

  showDate()    // 更新日期显示

})

代码：