关于Html轮播效果实现，带透明度渐隐 _HBuilder开辟东西

一个轮播主动切换结果，切换带渐隐结果适合新手进修

需要这些哦
HBuilder开辟东西
方式/
1筹办HBuilder开辟东西，在项目办理器右击一个web项目或者点击菜单栏新建web项目

文章插图

2接下来下载jquery包，并放入js文件夹下下载地址：https://pan.baidu.com/s/1DJAnnviApriru-5hb1CfRw

文章插图

3点击项面前目今的img文件夹并插手6张图片从头定名为0-5 后缀名为.jpg

文章插图

方式/
21在点击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(){