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();
});
});
</腳本>

</頭>
<內文>