当前位置：网站首页 > 创业 > 正文

关于Html轮播效果实现，带透明度渐隐

张子豪 2025-10-11 21:46 1

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

东西/原料

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
最后一步点击浏览器运行就可以看到结果啦。