前后分别设置一个伪元素
<!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>
这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
