仅作个人记录收藏
实现两个面板上下切换,结合amimate动画
<div class="carousel-box">
<ul class="carousel-list layui-clear">
<li id="carouselItem" class="carousel-list-item animate__animated carousel-list-item-front ">
<div class="carousel-header">
<h1>热门资源</h1>
</div>
<div class="carousel-body">
<ul class="resource-list">
<li>
<div class="resource-num">
<img src="../images/icon_rmzy_1.png" alt="">
</div>
<p class="resource-title">土地利用现状</p>
</li>
<li>
<div class="resource-num">
<img src="../images/icon_rmzy_2.png" alt="">
</div>
<p class="resource-title">地理国情</p>
</li>
<li>
<div class="resource-num">
<img src="../images/icon_rmzy_3.png" alt="">
</div>
<p class="resource-title">地名地址吧啦吧啦吧啦吧啦吧啦</p>
</li>
<li>
<div class="resource-num">4</div>
<p class="resource-title">地理国情</p>
</li>
<li>
<div class="resource-num">5</div>
<p class="resource-title">地名地址</p>
</li>
<li>
<div class="resource-num">6</div>
<p class="resource-title">土地利用现状吧啦吧啦吧啦吧啦吧啦吧啦</p>
</li>
<li>
<div class="resource-num">7</div>
<p class="resource-title">土地利用现状</p>
</li>
<li>
<div class="resource-num">8</div>
<p class="resource-title">土地利用现状啦吧啦</p>
</li>
</ul>
<div class="chart-render" id="resourceDataHot"></div>
</div>
</li>
<li class="carousel-list-item animate__animated">
<div class="carousel-header">
<h1>最新资源</h1>
</div>
<div class="carousel-body">
<ul class="resource-list">
<li>
<div class="resource-num">
<img src="../images/icon_rmzy_1.png" alt="">
</div>
<p class="resource-title">土地利用现状</p>
</li>
<li>
<div class="resource-num">
<img src="../images/icon_rmzy_2.png" alt="">
</div>
<p class="resource-title">地理国情</p>
</li>
<li>
<div class="resource-num">
<img src="../images/icon_rmzy_3.png" alt="">
</div>
<p class="resource-title">地名地址吧啦吧啦吧啦吧啦吧啦</p>
</li>
<li>
<div class="resource-num">4</div>
<p class="resource-title">地理国情</p>
</li>
<li>
<div class="resource-num">5</div>
<p class="resource-title">地名地址</p>
</li>
<li>
<div class="resource-num">6</div>
<p class="resource-title">土地利用现状吧啦吧啦吧啦吧啦吧啦吧啦</p>
</li>
<li>
<div class="resource-num">7</div>
<p class="resource-title">土地利用现状</p>
</li>
<li>
<div class="resource-num">8</div>
<p class="resource-title">土地利用现状啦吧啦</p>
</li>
</ul>
<div class="chart-render" id="resourceDataLatest"></div>
</div>
</li>
</ul>
</div>
//资源数据
function resourceRender() {
//资源数据
var resourceData = [703, 490, 380, 288, 197, 150, 98, 70];
var resourceDataChart = [];
resourceData.reverse().forEach(function (item, index) {
resourceDataChart.push(-item);
})
var resourceOption = {
tooltip: {
show: false
},
grid: {
left: '3%',
right: '20%',
bottom: '2.5%',
top: '2%',
containLabel: true
},
xAxis: [
{
type: 'value',
show: false
}
],
yAxis: [
{
type: 'category',
show: false
}
],
series: [
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'right',
formatter: function (params) {
return -params.value;
},
padding: [0, 0, 0, 15],
},
itemStyle: {
normal: {
// 每根柱子颜色设置
color: function (params) {
const colorList = [
new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: '#f9d749' },
{ offset: 1, color: '#ebb25e' }
],
false
),
// 2
new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: '#d3dce0' },
{ offset: 1, color: '#a5c0cb' }
],
false
),
// 3
new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: '#e8cc9c' },
{ offset: 1, color: '#c79e59' }
],
false
),
// 4
new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: '#9ccde8' },
{ offset: 1, color: '#3f7be8' }
],
false
),
]
if (params.dataIndex == 7) {
return colorList[0];
} else if (params.dataIndex == 6) {
return colorList[1];
} else if (params.dataIndex == 5) {
return colorList[2];
} else {
return colorList[3];
}
return colorList[params.dataIndex]
},
borderRadius: 15
}
},
barWidth: 9,
emphasis: {
focus: 'series'
},
data: resourceDataChart
}
]
};
var resourceElem = document.getElementById('resourceDataHot');
var resourceChart = echarts.init(resourceElem);
resourceChart.setOption(resourceOption);
var resourceElemLatest = document.getElementById('resourceDataLatest');
var resourceChartLatest = echarts.init(resourceElemLatest);
resourceChartLatest.setOption(resourceOption);
timer = setInterval(function () {
animateCarousel();
}, 4000)
$('.carousel-list-item').mouseleave(function () {
timer = setInterval(function () {
animateCarousel();
}, 4000)
})
}
$('.carousel-list-item').mouseenter(function () {
clearInterval(timer);
})
function animateCarousel() {
if ($('#carouselItem').hasClass('carousel-list-item-front')) {
$('#carouselItem').removeClass('carousel-list-item-front');
$('#carouselItem').siblings().addClass('carousel-list-item-front');
$('#carouselItem').siblings().addClass('animate__zoomIn');
} else {
$('#carouselItem').siblings().removeClass('carousel-list-item-front');
$('#carouselItem').addClass('carousel-list-item-front');
$('#carouselItem').addClass('animate__zoomIn');
}
setTimeout(function () {
$('#carouselItem').removeClass('animate__zoomIn');
$('#carouselItem').siblings().removeClass('animate__zoomIn');
}, 1000)
}
.carousel-box{
width: 44%;
height: 100%;
float: left;
}
.carousel-list{
position: relative;
height: 100%;
}
.carousel-list-item {
box-shadow: 0 0 24px 1px #e0e1e2;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fff;
margin: auto;
width: 69%;
height: 564px;
z-index: 0;
}
.carousel-list-item-front{
width: 95%;
height: 430px;
z-index: 1;
}
.carousel-list-item .carousel-header{
height: 46px;
margin: 23px auto 2px;
text-align: center;
}
.carousel-list-item .carousel-header h1{
width: 108px;
background: url('../images/rmzy_wxz.png') center center no-repeat;
color: #333;
font-size: 14px;
height: 34px;
line-height: 34px;
margin: 0 auto;
position: relative;
}
.carousel-list-item .carousel-header h1:before{
content: '';
position: absolute;
width: 186px;
height: 3px;
left: -200px;
top: 15px;
background: url('../images/rmzy_line_r.png') no-repeat;
}
.carousel-list-item .carousel-header h1:after{
content: '';
position: absolute;
width: 186px;
height: 3px;
right: -200px;
top: 15px;
background: url('../images/rmzy_line_l.png') no-repeat;
}
.carousel-list-item-front .carousel-header h1:before{
content: '';
position: absolute;
width: 109px;
height: 10px;
left: -130px;
top: 15px;
background: url('../images/rmzy_jiantou_r.png') no-repeat;
}
.carousel-list-item-front .carousel-header h1:after{
content: '';
position: absolute;
width: 109px;
height: 10px;
right: -130px;
top: 15px;
background: url('../images/rmzy_jiantou_l.png') no-repeat;
}
.carousel-list-item-front .carousel-header h1{
width: 168px;
background: url('../images/rmzy_xz.png') center center no-repeat;
color: #fff;
font-size: 16px;
height: 44px;
line-height: 44px;
}
.carousel-list .carousel-body{
height: 359px;
padding: 0 4%;
box-sizing: border-box;
}
.carousel-list .resource-list {
width: calc(100% - 350px);
height: 100%;
float: left;
}
.carousel-list .chart-render {
width: 350px;
height: 100%;
float: left;
}
.carousel-list .resource-list li{
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 40px;
line-height: 40px;
}
.carousel-list .resource-list .resource-num{
float: left;
width: 46px;
text-align: center;
font-style: italic;
color: #88adba;
font-size: 18px;
margin-right: 5px;
}