關于Html輪播效果實現，帶透明度漸隱

一個輪播主動切換結果，切換帶漸隱結果適合新手進修

東西/原料

HBuilder開辟東西

方式/步調

1
籌辦HBuilder開辟東西，在項目辦理器右擊一個web項目或者點擊菜單欄新建web項目
2
接下來下載jquery包，并放入js文件夾下下載地址：1DJAnnviApriru-5hb1CfRw
3
點擊項面前目今的img文件夾并插手6張圖片從頭定名為0-5 后綴名為.jpg

方式/步調2

1
在點擊index頁面插手代碼，起首在頭部<hade></head>標簽內引入下載好的jquery包
2
然后在<head></head>標簽內部鍵入css樣式代碼，以下代碼復制即可
<style type="text/css">
#headPlay{

height: 350px;
margin: 0px auto;
}
#autoplay{
width: 1000px;
height: 350px;
background: url(img/0.jpg) no-repeat;
cursor: pointer;
background-size: cover;
z-index: 0;
}
#headPlay img{
width: 1000px;
height: 350px;

}
#headPlay_UL_Move{
position: absolute;
width: 170px;
height: 40px;
transform: translate(415px,310px);

}
#headPlay_UL{
transform: translateX(16px);
width: 300px;
display: flex;
width: 190px;
height: 30px;
cursor: pointer;
}
#headPlay_UL li{
flex:1;
color: white;
font-size: 30px;
}
.widthBig{
width:1000px;
}
</style>
3
接下來鍵入jquery代碼：復制即可切記放在<head></head>標簽內部
<script type="text/javascript">
var hoverLI,index1,arr,setAutoplayInterval,clickLI,opacitySetinterval,lastLI,StartTime,lastTime,autoPlayStyle;
clickLI=0;
arr=["0","1","2","3","4","5"];
StartTime=[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1];
lastTime=[1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1];
min=9;
max=0;
$(function(){

autoPlay();
Hover();
autoPlayClick();
autoPlayStyle_Start();

})
function Hover(){

hoverLI=0;
$("#headPlay_UL>li").hover(function(){
clearInterval(setAutoplayInterval);
hoverLI=$(this).index();
$("#headPlay_UL li:eq("+hoverLI+")").css("color","red");
},function(){
if(lastLI!=hoverLI){
$("#headPlay_UL li:eq("+(hoverLI)+")").css("color","white");
}
});
$("#headPlay").hover(function(){
clearInterval(setAutoplayInterval);
clearInterval(autoPlayStyle);

},function(){

autoPlay();
autoPlayStyle_Start()

});
}
function autoPlayClick(){
$("#headPlay_UL li:eq("+clickLI+")").css("color","red");
lastLI=clickLI;
$("#headPlay_UL>li").click(function(){
$("#headPlay_UL li:eq("+(lastLI)+")").css("color","white");
clickLI=$(this).index();
$("#headPlay_UL li:eq("+clickLI+")").css("color","red");
lastLI=clickLI;
$("#autoplay").css("background","url(img/"+arr[clickLI]+".jpg)no-repeat");
$("#autoplay").css("background-size","cover");
});
}
function autoPlay(){
setAutoplayInterval=setInterval(function(){
clickLI=clickLI>=arr.length-1?0:clickLI+1;
$("#headPlay_UL>li").get(clickLI).click();
clearInterval(autoPlayStyle);
autoPlayStyle_Start();
},4000);
}
function autoPlayStyle_Start(){
autoPlayStyle=setInterval(function(){
opacitySetinterval=setInterval(function(){
if(max<=lastTime.length){

$("#headPlay").css("opacity",lastTime[lastTime.length-min]);
min--;
max++;

}
if(max>=StartTime.length){

$("#headPlay").css("opacity",StartTime[min++]);
if(min==lastTime.length){
max=0;
}
}
},100);
setTimeout(function(){
clearInterval(opacitySetinterval);
},2000);
},3000);
}
</script>
4
最后鍵入html文檔代碼復制即可放在<body></body>標簽內部
<div id="headPlay" class="widthBig" >
<div id="headPlay_UL_Move">
<ul id="headPlay_UL" style="list-style:disc;">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<div id="autoplay" /></div>

</div>
5
最后一步點擊瀏覽器運行就可以看到結果啦。