前后分别设置一个伪元素
<!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>
这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。
<style>ul{
margin:0px
padding:0px
}
li{
float:left
cursor:pointer
}
.map_div{
width:900px
height:40px
background-color:#000000
overflow:hidden
}
#dh_li{
width:800px
height:40px
background-color:#000000
white-space:nowrap
text-overflow:ellipsis
overflow:hidden
text-overflow:ellipsis
display:block
after:content:"..."
}
#dh_li li{
width:150px
height:40px
background-color:#000000
color:#FF0000
border-right:1px solid #FF0000
text-align:center
padding-top:10px
overflow:hidden
}
#dh_li li a:link{
color:#FF0000
}
#dh_li li a:visited{
color:#FF0000
}
#dh_li li a:hover{
color:#FF0000
}
.dh_li{
width:50px
height:40px
font-size:20px
font-weight:bold
color:#FF0000
text-align:center
padding-top:10px
background-color:#CCCCCC
}
</style>
<body>
<div class="map_div">
<ul>
<li id="dh_li">
<div style="width:1500px">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">新闻咨询</a></li>
<li><a href="#">热点咨询</a></li>
<li><a href="#">合作伙伴</a></li>
<li><a href="#">网站论坛</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</li>
<li id="left_" class="dh_li" onclick="move_left()">←</li>
<li id="right_" class="dh_li" onclick="move_right()">→</li>
</ul>
</div>
</body>
<script>
var demo=document.getElementById("dh_li")
function move_right()
{
if(dh_li.scrollLeft<=(1500-800))
dh_li.scrollLeft+=150
}
function move_left()
{
if(dh_li.scrollLeft>=0)
dh_li.scrollLeft-=150
}
</script>
