<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js" ></script>
<title>虎牙动感轮播图</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html{
width:100%;
height:100%;
background-image: linear-gradient(#cc00cc,#ddFF00);
}
.box{
overflow: hidden;
position: relative;
width:100%;
height:246px;
}
.banner{
width:1340px;
height:246px;
margin:0 auto;
position: relative;
/*transform-style: preserve-3d;*/
}
.banner li{
position: absolute;
width:750px;
height:246px;
list-style:none;
opacity: 0;
}
img{
width:750px;
height:246px;
}
.banner .p1{
left:300px;
opacity: 1;
z-index:3;
}
.banner .p2{
opacity: 0.8;
left:0;
}
.p2 img{
transform:scale(0.8);
}
.banner .p3{
opacity: 0.8;
left:600px;
}
.p3 img{
transform:scale(0.8);
}
.banner .p4{
opacity:0;
left:-300px;
}
.p4 img{
transform:scale(0.8);
}
.banner .p5{
opacity: 0;
left:900px;
}
.p5 img{
transform:scale(0.8);
}
.banner .p6{
opacity: 0;
left:300px;
}
.p6 img{
transform:scale(0.8);
}
.b_btn{
width:200px;
height:30px;
position: absolute;
left:682px;
bottom:5px;
z-index:999;
}
.b_btn .btn_active{
background:#924c9b;
opacity: 1;
}
.b_btn li{
width:20px;
height:20px;
border-radius:100%;
background:#a39393;
list-style:none;
float: left;
margin:0 5px;
}
</style>
</head>
<body>
<div> 背景渐变色效果代码：background-image: linear-gradient(#cc00cc,#ddFF00);</div>
<!--start-->
<div class="box">
<ul class="banner">
<li class="p1"><img src="img/1.jpg"/> </li>
<li class="p2"><img src="img/2.jpg"/> </li>
<li class="p3"><img src="img/3.jpg"/> </li>
<li class="p4"><img src="img/4.jpg"/> </li>
<li class="p5"><img src="img/5.jpg"/> </li>
<li class="p6"><img src="img/6.jpg"/> </li>
</ul>
<ul class="b_btn">
<li class="btn_active"></li>
<li></li>
<li ></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--end-->
<script type="text/javascript">
$(function(){
$(".b_btn").find("li").each(function(){
$(this).click(function(){
$(this).addClass("btn_active").siblings().removeClass("btn_active");
var index =$(this).index()
});
});
});
//向右移动
function moveRight(){
}
/*
setInterval(function(){
for(int i =index;i<7;i++;){
$(".banner").find(".p"+index).animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p3").find("img").css("transform","scale(1)");
}
},1000,function(){
index++;
});
*/
var index =1;
setInterval(function() {
/* $(".banner").find(".p3").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p3").find("img").css("transform","scale(1)");*/
console.log("index"+index);
//1
if(index==1){
$(".banner").find(".p1").animate({"opacity":"0.8","left":"0px","z-index":"2"});
$(".p1").find("img").css("transform","scale(0.8)");
$(".banner").find(".p2").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p2").find("img").css("transform","scale(0.8)");
$(".banner").find(".p3").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p3").find("img").css("transform","scale(1)");
$(".banner").find(".p4").animate({"opacity":"0","left":"300px","z-index":"1"});
$(".p4").find("img").css("transform","scale(0.8)");
$(".banner").find(".p5").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p5").find("img").css("transform","scale(0.8)");
$(".banner").find(".p6").animate({"opacity":"0","left":"900px","z-index":"1"});
$(".p6").find("img").css("transform","scale(0.8)");
}
//2
if(index==2){
$(".banner").find(".p1").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p1").find("img").css("transform","scale(0.8)");
$(".banner").find(".p2").animate({"opacity":"0","left":"300px","z-index":"1"});
$(".p2").find("img").css("transform","scale(0.8)");
$(".banner").find(".p3").animate({"opacity":"0.8","left":"0px","z-index":"2"});
$(".p3").find("img").css("transform","scale(0.8)");
$(".banner").find(".p4").animate({"opacity":"0","left":"900px","z-index":"1"});
$(".p4").find("img").css("transform","scale(0.8)");
$(".banner").find(".p5").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p5").find("img").css("transform","scale(1)");
$(".banner").find(".p6").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p6").find("img").css("transform","scale(0.8)");
}
//3
if(index==3){
$(".banner").find(".p1").animate({"opacity":"0","left":"0px","z-index":"1"});
$(".p1").find("img").css("transform","scale(0.8)");
$(".banner").find(".p2").animate({"opacity":"0","left":"900px","z-index":"1"});
$(".p2").find("img").css("transform","scale(0.8)");
$(".banner").find(".p3").animate({"opacity":"0","left":"-300px","z-index":"2"});
$(".p3").find("img").css("transform","scale(0.8)");
$(".banner").find(".p4").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p4").find("img").css("transform","scale(0.8)");
$(".banner").find(".p5").animate({"opacity":"0.8","left":"0px","z-index":"2"});
$(".p5").find("img").css("transform","scale(0.8)");
$(".banner").find(".p6").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p6").find("img").css("transform","scale(1)");
}
//4
if(index==4){
$(".banner").find(".p1").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p1").find("img").css("transform","scale(0.8)");
$(".banner").find(".p2").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p2").find("img").css("transform","scale(0.8)");
$(".banner").find(".p3").animate({"opacity":"0","left":"300px","z-index":"1"});
$(".p3").find("img").css("transform","scale(0.8)");
$(".banner").find(".p4").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p4").find("img").css("transform","scale(1)");
$(".banner").find(".p5").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p5").find("img").css("transform","scale(0.8)");
$(".banner").find(".p6").animate({"opacity":"0.8","left":"0px","z-index":"2"});
$(".p6").find("img").css("transform","scale(0.8)");
}
//5
if(index==5){
$(".banner").find(".p1").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p1").find("img").css("transform","scale(0.8)");
$(".banner").find(".p2").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p2").find("img").css("transform","scale(1)");
$(".banner").find(".p3").animate({"opacity":"0","left":"900px","z-index":"1"});
$(".p3").find("img").css("transform","scale(0.8)");
$(".banner").find(".p4").animate({"opacity":"0.8","left":"0px","z-index":"2"});
$(".p4").find("img").css("transform","scale(0.8)");
$(".banner").find(".p5").animate({"opacity":"0","left":"300px","z-index":"1"});
$(".p5").find("img").css("transform","scale(0.8)");
$(".banner").find(".p6").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p6").find("img").css("transform","scale(0.8)");
}
//6
if(index==6){
$(".banner").find(".p1").animate({"opacity":"1","left":"300px","z-index":"3"});
$(".p1").find("img").css("transform","scale(1)");
$(".banner").find(".p2").animate({"opacity":"0.8","left":"0px","z-index":"2"});
$(".p2").find("img").css("transform","scale(0.8)");
$(".banner").find(".p3").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p3").find("img").css("transform","scale(0.8)");
$(".banner").find(".p4").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p4").find("img").css("transform","scale(0.8)");
$(".banner").find(".p5").animate({"opacity":"0","left":"900px","z-index":"1"});
$(".p5").find("img").css("transform","scale(0.8)");
$(".banner").find(".p6").animate({"opacity":"0","left":"300px","z-index":"1"});
$(".p6").find("img").css("transform","scale(0.8)");
}
/*
$(".banner").find(".p2").animate({"opacity":"0","left":"-300px","z-index":"1"});
$(".p1").find("img").css("transform","scale(0.8)");
$(".banner").find(".p4").animate({"opacity":"0.8","left":"600px","z-index":"2"});
$(".p4").find("img").css("transform","scale(0.8)");*/
index++;
$(".b_btn").find("li").eq(index-1).addClass("btn_active").siblings().removeClass("btn_active");
console.log(index)
if(index>6){
index=1;
$(".b_btn").find("li").eq(0).addClass("btn_active").siblings().removeClass("btn_active");
}
}, 3000);
</script>
</body>
</html>
作者： 看到虎牙的轮播图功能 闲来无事 实现了一下 代码 没有做优化 代码有大量的冗余 原理逻辑很清晰！！
本文发布于:2024-01-29 17:25:32，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170652033417043.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
