我想要实现图片的自动轮播，并且可以点击图片在新页面查看图片，刚开始的一次循环点击图片可以跳转新页面，可是之后的点击却无效
<!doctype
<html>
<head>
<meta charset="UTF-8">
<title>Demo13-2</title>
<style>
.container{width:300px;height:150px;margin:200px auto;}
.left,.right{width:10%;height:100%;line-height:150px;text-align: center;float:left}
.picbox{width:80%;height:100%;float:left;overflow: hidden;}
.pic{position:relative;width:720px;overflow:visible}
img{width:100%;height:100%}
.img{width:240px;height:150px;float:left}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
var stop =false;
var index = -1;
var pics = ["1","2","3"];
$.each(pics,function(index,value){
$(".pic").append($("<div class='img'><a href='img/"+value+".jpg'><image src='img/"+value+".jpg' /></a></div>"));
})
$(".pic").hover(function(){stop=true;},function(){stop=false;});
setInterval(function(){
if(stop) return;
var left = parseInt($(".pic").css("left"))-1;
//alert(left);
$(".pic").css({left:left});
if(left % 240 ==0)
{
index++;
var w = parseInt($(".pic").css("width")) +240 ;
$(".pic").css({"width":w})
$(".pic").append($("<div class='img'><image src='img/"+pics[index%pics.length]+".jpg' /></div>"));
}
},10);
})
</script>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="picbox">
<div class="pic"></div>
</div>
<div class="right"></div>
</div>
</body>
</html>
