关于Html轮播效果实现，带透明度渐隐
1、准备HBuilder开发工具，在项目管理器右击一个web项目或者点击菜单栏新建web项目
2、接下来下载jquery包，并放入js文件夹下 下载地址：https://pan.baidu.com/s/1DJAnnviApriru-5hb1CfRw
3、点击项目下的img文件夹并加入6张图片重新命名为0-5 后缀名为.jpg
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><!--轮播-div结尾-->
5、最后一步点击浏览器运行就可以看到效果啦。
