使用JQuery实现首页轮播图，左右切换，圆点切换，鼠标进入图片时悬停，移除自动切换效果

测试了很多次把所有遇见的坑都解决掉了,直接上代码

//HTML代码
<div class="banner">
<!-- 轮播大图 -->
<ul class="banner_img">
<li>
<a href="javascript:;">
<img src="../../images/banner01.png">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../images/banner02.png">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../images/banner03.png">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../images/banner04.png">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../images/banner05.png">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../images/banner06.png">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../images/banner07.png">
</a>
</li>
</ul>
<!-- 左右箭头 -->
<a href="javascript" class="ck-side ck-left"></a>
<a href="javascript" class="ck-side ck-right"></a>
<!-- 轮播指示器 -->
<ul class="banner_ind">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
//js代码
<script>
var i=0;
var timer=0;
var $width=1920;
var $li=$("ul.banner_img li");
$("ul.banner_ind>li").first().css("background","#e74c3c");
$("ul.banner_img").append($("ul.banner_img>li:eq(0)").clone());
var $lth=$('ul.banner_img li').length;
$('ul.banner_img').css('width',$width*$lth);
// 左右滑动图
function fun1(){
i++;
$("ul.banner_img").animate({left:-i*$width},500,function(){
if(i>=$lth-1){
$("ul.banner_img").css('left',0);
i=0;
}
$("ul.banner_ind>li").eq(i).css("background","#e74c3c").siblings().css("background","#fff");
})
}
function moveAuto(){
timer=setInterval(fun1,4000)
}
moveAuto();
//鼠标移入移出
$("div.banner").mouseenter(function(){
clearInterval(timer);
timer=null;
}).mouseleave(function(){
moveAuto()
})
//左右箭头
//左箭头
$(".banner .ck-left").click(function(e){
e.preventDefault();
if(i==0){
i=$lth-1;
$("ul.banner_img").css('left',-i*$width);
}
i--;
$("ul.banner_img").animate({left:-i*$width},500,function(){
if(i<0){
$("ul.banner_img").css('left',-$width*6);
i=6;
}
$("ul.banner_ind>li").eq(i).css("background","#e74c3c").siblings().css("background","#fff");
})
})
//右箭头
$(".banner .ck-right").click(function(e){
e.preventDefault();
i++;
$("ul.banner_img").animate({left:-i*$width},500,function(){
if(i>=$lth-1){
$("ul.banner_img").css('left',0);
i=0;
}
$("ul.banner_ind>li").eq(i).css("background","#e74c3c").siblings().css("background","#fff");
})
})
//圆点点击切换
$("ul.banner_ind").click(function(e){
i=$(e.target).index();
$("ul.banner_img").animate({left:-i*$width},500,function(){
if(i>=$lth-1){
$("ul.banner_img").css('left',0);
i=0;
}
})
$("ul.banner_ind>li").eq(i).css("background","#e74c3c").siblings().css("background","#fff");
})
<script/>
//css代码

div.banner{
margin:0 auto;
position:relative;
height:560px;
z-index:0;
overflow: hidden;
}
ul.banner_img{
position:absolute;
left:0;
}
.banner_img>li>a>img{
height:560px;
width:100%;
}
.banner_img>li{
float:left;
}
.banner>a.ck-side{
width:70px;
height:70px;
position:absolute;
top:48%;
}
a.ck-left{
background:#000 url(../../images/left_02.png!c.png) no-repeat center center;
left:0;
}
a.ck-right{
background:#000 url(../../images/right_02.png!c.png) no-repeat center center;
right:0;
}
.banner>a.ck-side:hover{
background-color:rgba(0,0,0,0.6);
}
ul.banner_ind{
list-style: none;
position:absolute;
bottom:10px;
left:0;
z-index:2;
margin-left:892px;
}
ul.banner_ind>li{
width: 11px;
height: 11px;
border-radius: 50%;
display: inline-block;
background: #bfbfbf;
margin:0 3px;
}