使用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;}