我们通过 bind 的方法将我们方法绑定到指定的对象，这样我们的方法就有了 context 也就是上下文。这样就解决了问题，这样写法我们在 jquery 的事件绑定是最常见不过的了。
当然我们也可以也使用 es6 的箭头函数作为 ready 属性，这个箭头好处就是我无需再写 bind 来讲方法绑定到指定对象，箭头方法中 this 对象。
不通过这样做还是有性能问题的，
这种写法想必我们在写 react 时候会经常遇到这种写法。这样同样可以解决 this 的指向的问题。
每一次都会创建一个函数
我们对 createWarrior 进行改造。
JS箭头函数和function的区别：
箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
不可以使用yield命令，因此箭头函数不能用作Generator函数。
详细解释请参见资料：
http://es6.ruanyifeng.com/#docs/function#使用注意点
前后分别设置一个伪元素
<!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>
这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。
