jQuery仿1688的首页广告图片切换

<头>
<元字符集=“UTF-8”>


<样式类型=“text/css”>
div,ul,li,a,span,img{边距:0;填充:0;}
li{列表样式：无;}
#slider{宽度:790px;高度:340px;边距:10%自动;位置:相对;}
.slider_list li{位置：绝对；显示：无；}
.slider_list li:first-child{display:block;}
.slider_icon{位置：绝对；z-index：1；左：40％；底部：20px；字体大小：0；填充：4px 8px；边框半径：12px；背景颜色：hsla（0,0％， 100%,.3);}
.slider_icon i{显示：内联块；宽度：12px；高度：12px；边框半径：50%；边距：0 5px；}
.btn{背景:#fff;}
.arrow{显示：无；宽度：30px；高度：60px；背景颜色：rgba(0,0,0,.2)；位置：绝对；顶部：50%；顶部边距：-30px；}
.prve{左：0;}
.next{右:0;}
.arrow span{显示：块；宽度：10px；高度：10px；边框底部：2px实心#fff；边框左：2px实心#fff；}
.slider_left{边距:25px 0 0 10px;变换:旋转(45deg);}
.slider_right{边距:25px 0 0 5px;变换:旋转(-135deg);}
.arrow:悬停{背景:#444;}
#slider:hover .arrow{显示:块;}
.btn_act{背景:#db192a;}
</风格>

<脚本类型=“text/javascript”src=“js/jquery-1.11.3.min.js”></script>
<脚本类型=“text/javascript”>
$(函数(){
变量计数 = 0;
var $li = $("#slider>ul>li");
$(".next").click(function(){
计数++；
if(count == $li.length){
计数 =0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
console.log(计数);
});
$(".prve").click(function(){
数数 - ;＃＃＃ if(计数 == -1){
计数 = $li.length-1;
}
console.log(计数);
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
});
$(".slider_icon i").mouseenter(function(){
$(this).addClass('btn_act').siblings().removeClass("btn_act");
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
计数 = $(this).index();
});
});
</脚本>

</头>
<正文>