前后分别设置一个伪元素
<!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() // 更新日期显示
})
代码：
