<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>甘肃省人民检察院兰铁分院</title>
<link th:href="@{/home/base/favicon.ico}" rel="shortcut icon"/>
<link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css?v=4.7.0}" rel="stylesheet"/>
<link rel="stylesheet" th:href="@{/js/base/owl-carousel/owl.carousel.css}">
<link rel="stylesheet" th:href="@{/js/base/owl-carousel/owl.theme.css}">
<style>
/* 页面整体布局 */
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.layui-nav-item {
position: relative;
margin: 0 10px;
padding: 0 5px;
}
/* 设置内容区域自动填充剩余高度 */
#content {
flex-grow: 1;
padding-bottom: 5px;
}
.time {
position: absolute;
right: 0;
}
.newslist li a{
line-height: 35px;
font-size: 15px;
cursor: pointer;
}
.newslist-to li a{
line-height: 35px;
font-size: 15px;
cursor: pointer;
margin-left: 15px;
width: 70%;
display: inline-block;
overflow: hidden;
height: 25px;
white-space: nowrap;
text-overflow: ellipsis;
}
.newslist-to li:before {
content: '';
position: absolute;
left: 0;
top: 50%;
margin-top: -3px;
width: 6px;
height: 6px;
background: #0558b0;
}
.newslist-to li {
position: relative;
overflow: hidden;
vertical-align: top;
line-height: 40px;
font-size: 16px;
}
.zhuanti{
display: flex;
flex-wrap: wrap;
align-items: center;
height: 400px;
overflow:hidden;
}
.zhuanti li{
margin:9px;
margin-bottom: -7px;
margin-top: 20px;
overflow:hidden;
display: flex;
flex-direction: column;
text-align: center;
white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis; /* 显示省略号 */
position: relative;
}.zhuanti li span{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
width: 100%;
position: absolute;
bottom: 0;
height: 25px;
line-height: 25px;
background-color: rgb(0 0 0 / 0.7);
color: white;
}
.zhuanti li img{
transition: all 0.3s;
}
.zhuanti li:hover img{
transform:scale(1.1)
}
.zhuanti li:hover span{
color: #ffbb3f;
}
.more a {
display: inline-block;
width: 58px;
height: 24px;
border-radius: 5px;
line-height: 24px;
color: #074488;
font-size: 14px;
text-align: center;
position: absolute;
right: 6px;
top: 10px;
}
.zhuantidept{
//display: flex;
//flex-wrap: wrap;
height: 400px;
overflow: auto;
box-sizing:border-box;
padding-left:30px;
padding-top:20px;
}
.zhuantidept li{
transition: all 0.3s;
float: left;
margin-bottom: 10px;
}
.zhuantidept li:hover{
transform: translateY(-5%);
}
.zhuantidept li a{
width: 169px;
height: 84px;
margin: 0 10px 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 10px;
background-image: url(/home/base/bumen1.jpg);
background-size: 100% 100%;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
font-size: 17px;
}
a {
text-decoration: none;
color: #000;
}
a:hover{
color: #006fc4;
}
.customNavigation .prev, .customNavigation .next {
position: absolute;
width: 16px;
height: 25px;
top: 41%;
z-index: 22;
background-image: url(/home/base/i122.png);
cursor: pointer;
}
.customNavigation .prev{
left: 0;
}
.customNavigation .next {
right: 0;
background-position: right;
}
.item{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ztgg {
height: 60px;
margin: 25px auto 0px auto;
display: flex;
justify-content: space-between;
align-item:center;
flex-wrap: nowrap;
position: relative;
padding: 0 8px 0 8px;
}
.ztgg .ztgg_box{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 6px;
overflow:hidden;
}
.ztgg .ztgg_box .images{
transition: transform 0.5s ease-in-out;
}
.ztgg .arrow-left{
left: -20px;
}
.ztgg .arrow-left, .ztgg .arrow-right {
position: absolute;
width: 16px;
height: 25px;
top: 50%;
z-index: 22;
background-image: url(/home/base/i122.png);
cursor: pointer;
transform: translateY(-50%);
}
.ztgg .arrow-right {
right: -20px;
background-position: right top;
}
.ariaskiptheme{
margin:0;
margin-right:30px;
}
.ariaskiptheme img{
width: 300px;
height: 70px;
box-shadow: 0 0 10px 4px #ddd;
transition: all 0.3s;
}
#back-to-top {
display: none;
position: fixed;
bottom: 12%;
right: 2%;
cursor: pointer;
transition: opacity 0.3s;
width: 50px;
height: 50px;
z-index: 100;
}
#back-to-top img {
width: 100%;
height: 100%
}
#back-to-top:hover {
opacity: 0.7;
}
.lantieContent{
width:100%;
display:flex;
justify-content: space-between;
}
.lantieContent .right{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content: space-around;
overflow:auto;
}
.lantieContent .right li{
position: relative;
}
.lantieContent .right li span{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
display: inline-block;
height: 25px;
line-height: 25px;
margin-top: -8px;
background-color: rgb(0 0 0 / 0.7);
color: white;
}
.lantieContent .right li:hover span{
color: #ffbb3f;
}
.lianjieBox{
width:100%;
display:flex;
justify-content: space-between;
}
.lianjieList li:before {
content: '';
position: absolute;
left: 9px;
top: 50%;
margin-top: -3px;
width: 6px;
height: 6px;
background: #0558b0;
}
.lianjieList li{
width:100%;
height: 45px;
line-height: 45px;
box-sizing: border-box;
border-bottom:1px solid #ccc;
padding-left:30px;
position: relative;
font-size:16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lianjieList{
width:30%;
height:100%;
}
.map{
width:50%;
height:100%;
}
.map li{
width:100%;
height:100%;
position: relative;
}
.map li a img{
transition: all 0.3s;
}
.map li a img:hover{
transform: translateY(-5%);
}
.map .font1{
width: 30px;
height: 28px;
position: absolute;
right: 57%;
top: 52%;
}
.map .font2{
width: 30px;
height: 28px;
position: absolute;
right: 60%;
top: 28%;
}
.map .font3{
width: 30px;
height: 28px;
position: absolute;
right: 66%;
top: 43%;
}
.map .font4{
width: 30px;
height: 28px;
position: absolute;
right: 50%;
top: 31%;
}
.map .lantie{
width:30px;
height:28px;
}
.map .wutie{
width:30px;
height:28px;
}
.map .xitie{
width:30px;
height:28px;
}
.map .yintie{
width:30px;
height:28px;
}
.sliderA{
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
width: 100%;
height: 42px;
box-sizing: border-box;
background-color: rgba(0, 61, 131,0.9);
line-height: 25px;
font-size: 18px;
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sliderA:hover{
color: #ffbb3f;
}
.notice{
width: 55%;
height: 40px;
margin: 54px auto 22px;
overflow: hidden;
font-weight: bold;
}
.notice__inner{
animation: roll 36s linear infinite;
margin-top: 0
}
.notice__item{
font-size: 38px;
height: 40px;
line-height: 40px;
padding: 0 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 15px;
}
@keyframes roll {
0% {
margin-top: 0;
}
4% {
margin-top: 0;
}
8% {
margin-top: 0;
}
12% {
margin-top: -55px;
}
16% {
margin-top: -55px;
}
20% {
margin-top: -110px;
}
24% {
margin-top: -110px;
}
28% {
margin-top: -165px;
}
32% {
margin-top: -165px;
}
36% {
margin-top: -220px;
}
40% {
margin-top: -220px;
}
44% {
margin-top: -275px;
}
48% {
margin-top: -275px;
}
52% {
margin-top: -330px;
}
56% {
margin-top: -330px;
}
60% {
margin-top: -275px;
}
64% {
margin-top: -275px;
}
68% {
margin-top: -220px;
}
72% {
margin-top: -220px;
}
76% {
margin-top: -165px;
}
80% {
margin-top: -165px;
}
84% {
margin-top: -110px;
}
88% {
margin-top: -110px;
}
92% {
margin-top: -55px;
}
96% {
margin-top: -55px;
}
100% {
margin-top: 0;
}
}
.xuanchuanImage {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
}
.xuanchuanImage .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 2s ease-in-out;
opacity: 0;
pointer-events: none;
}
.xuanchuanImage .active {
opacity: 1;
pointer-events: auto;
}
.xuanchuanImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body class="layui-bg-gray" style="">
<div id="content">
<!--头部-->
<th:block th:include="home_head1 :: home_head"/>
<div id="back-to-top" onclick="scrollToTop()">
<img th:src="@{/home/base/fanhui.png}">
</div>
<div class="layui-container">
<div class="notice">
<div class="notice__inner">
<div class="notice__item" th:each="notice,status : ${noticeList}">
<a style="color: #c70011" th:href="@{/public_view.html(type=1,id=${notice.noticeId})}" th:title="${notice.noticeTitle}" target="_blank" >[[${#strings.abbreviate(notice.noticeTitle,33)}]]</a>
</div>
</div>
</div>
<div class="layui-row layui-col-space1">
<div class="layui-col-md6">
<div class="layui-carousel" id="ID-carousel-demo-image" style="width: 650px;height: 433px;">
<div carousel-item>
<tbody th:each="url,status : ${urlList}">
<a th:href="@{/public_view.html(type=2,id=${url.workId})}" th:title="${url.workTitle}" target="_blank">
<img th:src="${url.imgUrl}" style="height: 100%;width: 100%">
<span class="sliderA">[[${#strings.abbreviate(url.workTitle,28)}]]</span>
</a>
</tbody>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">
<i class="layui-icon layui-icon-notice" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;height: 100%;line-height: 40px;color: #074488;">最新通知</i>
<span class="more">
<a href="announce_view.html" target="_blank">更多+</a>
</span>
</div>
<div class="layui-card-body" style="max-height: 400px;overflow: hidden;">
<div style="width:100%;height: 163px;border-bottom: 1px solid #e6e6e6;box-sizing: border-box;line-height: 47px">
<h1 style="font-size: 22px;">
<a th:href="@{/public_view.html(type=1,id=${noticeList[0].noticeId})}" th:title="${noticeList[0].noticeTitle}" target="_blank" >[[${#strings.abbreviate(noticeList[0].noticeTitle,33)}]]</a>
</h1>
<p style="font-size: 16px;color: #777;">时间:[[${#dates.format(noticeList[0].createTime, 'yyyy年MM月dd日')}]]</p>
</div>
<ul class="newslist-to">
<li th:each="notice,status : ${noticeList}" th:if="${!status.first}">
<a th:href="@{/public_view.html(type=1,id=${notice.noticeId})}" th:title="${notice.noticeTitle}" target="_blank" >[[${#strings.abbreviate(notice.noticeTitle,33)}]]</a>
<span class="time" >[[${#dates.format(notice.createTime, 'yyyy年MM月dd日')}]] </span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 宣传图-->
<div class="layui-container" style="padding-top: 30px">
<div class="xuanchuanImage">
<a th:href="@{/special_view.html(columnId=${specialColumns[0].columnId})}" th:title="${specialColumns[0].columnName}" target="_blank">
<img th:src="@{/home/base/dangji.jpg}" style="width: 100%" class="slide active">
</a>
<a th:href="@{/special_view.html(columnId=${specialColumns[1].columnId})}" th:title="${specialColumns[1].columnName}" target="_blank">
<img th:src="@{/home/data/announceimg/21da.png}" style="width: 100%" class="slide">
</a>
</div>
</div>
<!--工作动态、内设部门-->
<div class="layui-container" style="padding-top: 30px">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-note" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;height: 100%;line-height: 40px;color: #074488;">工作动态</i>
<span class="more">
<a href="work_view.html" target="_blank">更多+</a>
</span>
</div>
<div class="layui-card-body" style="max-height: 400px;overflow: hidden;">
<div style="width:100%;height: 165px;display: flex;justify-content: space-between;">
<div style="height: 100%;width: 47%">
<a th:href="@{/public_view.html(type=2,id=${workList[0].workId})}" th:title="${workList[0].workTitle}" target="_blank">
<img style="height: 95%;width: 90%" th:src="${workList[0].imgUrl}" th:alt="${workList[0].workTitle}" th:title="${workList[0].workTitle}">
</a>
</div>
<div style="height: 100%;width: 51%;text-align:left;line-height: 40px;">
<a th:href="@{/public_view.html(type=2,id=${workList[0].workId})}" th:title="${workList[0].workTitle}" target="_blank">
<b style="font-size:18px;">[[${#strings.abbreviate(workList[0].workTitle,28)}]]</b><br/>
<p style="font-size: 16px;color: #777;">时间:[[${#dates.format(workList[0].createTime, 'yyyy年MM月dd日')}]]</p>
</a>
</div>
</div>
<ul class="newslist-to">
<li th:each="work,status : ${workList}" th:if="${!status.first}">
<a th:href="@{/public_view.html(type=2,id=${work.workId})}" th:title="${work.workTitle}" target="_blank">[[${#strings.abbreviate(work.workTitle,28)}]]</a>
<span class="time">[[${#dates.format(work.createTime, 'yyyy年MM月dd日')}]]</span>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-user" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;height: 100%;line-height: 40px;color: #074488;">部门动态</i>
<span class="more">
<a href="dept_trends_view.html" target="_blank">更多+</a>
</span>
</div>
<div class="layui-card-body">
<ul class="newslist zhuantidept">
<li th:each="trend,status : ${deptColumns}">
<a th:href="@{/dept_trends_view.html(columnId=${trend.columnId})}" style="color:#fff;" th:title="${trend.columnName}" target="_blank">
<!-- <i class="fa fa-bar-chart-o" th:class="${trend.icon}"></i>-->
<img th:src="@{/home/base/bumen.png}" style="height: 30px;width: 29px;">
[[${trend.columnName}]]
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr style="padding-top: 25px">
<!-- 跳转链接-->
<div class="layui-container" style="padding-top: 25px">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-website" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;height: 100%;line-height: 40px;color: #074488;">应用系统</i>
</div>
<div class="layui-card-body layui-row systemSlider">
<div id="owl-demo" class="owl-carousel">
<div class="item" th:each="content,status : ${contentList}">
<a target="_blank" th:href="@{${content.contentUrl}}" th:title="${content.contentTitle}">
<span style="display:inline-block;width:50px;height:50px;border-radius:50%;font-size:28px;line-height:50px;background-color:rgba(27, 110, 196, 0.68);">
<i style="color: #fff;" class="fa fa-bar-chart-o" th:class="${content.icon}"></i>
</span>
<p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width:120px;color: #074488;font-size: 16px;">
[[${content.contentTitle}]]
</p>
</a>
</div>
</div>
<div class="customNavigation">
<a class="btn prev"></a>
<a class="btn next"></a>
</div>
</div>
</div>
</div>
<hr style="padding-top: 25px">
<div class="layui-container" style="padding-top: 25px">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-tabs" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;height: 100%;line-height: 40px;color: #074488;">检察业务</i>
<span class="more">
<a href="business_view.html" target="_blank">更多+</a>
</span>
</div>
<div class="layui-card-body">
<ul class="newslist-to">
<li th:each="business,status : ${businessList}">
<a th:href="@{/public_view.html(type=4,id=${business.businessId})}" th:title="${business.businessTitle}" target="_blank">[[${#strings.abbreviate(business.businessTitle,28)}]]</a>
<span class="time">[[${#dates.format(business.createTime, 'yyyy年MM月dd日')}]]</span>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-theme" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;;height: 100%;line-height: 40px;color: #074488;">专题活动</i>
<span class="more">
<a href="special_view.html" target="_blank">更多+</a>
</span>
</div>
<div class="layui-card-body">
<ul class="newslist zhuanti">
<li th:each="column,status : ${specialColumns}">
<a th:href="@{/special_view.html(columnId=${column.columnId})}" th:title="${column.columnName}" target="_blank">
<img style="height:155px;width: 190px " th:src="${column.columnUrl}">
</a>
<span style="margin-top: 5px;font-size: 15px;">[[${column.columnName}]]</span >
</li>
</ul>
</div>
</div>
</div>
</div>
<hr style="padding-top: 25px">
<!-- 兰铁之窗-->
<div class="layui-container" style="padding-top: 25px">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-website" style="display: inline-block;font-size: 21px;
font-weight: bold;border-bottom: 3px solid #074488;height: 100%;line-height: 40px;color: #074488;">兰铁视窗</i>
</div>
<div class="layui-card-body layui-row">
<div class="lantieContent">
<ul class="right">
<li th:each="content,status : ${windowColumns}" style="width:22%;text-align:center;">
<video th:src="${content.columnUrl}" class="video" style="width:100%;"></video>
<span style="font-size: 15px;">[[${content.columnName}]]</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr style="padding-top: 25px">
<!-- 友情链接 -->
<div class="layui-container" style="padding-top: 25px">
<div class="layui-card">
<div class="layui-card-body layui-row">
<div class="lianjieBox">
<ul class="lianjieList">
<li>
<a target="_blank" href="http://www.gj.jcy/">中华人民共和国最高人民检察院</a>
</li>
<li>
<a target="_blank" href="http://143.208.161.100/">甘肃省人民检察院</a>
</li>
<li>
<a target="_blank" href="http://143.212.248.10">兰州铁路运输检察院</a>
</li>
<li>
<a target="_blank" href="http://143.212.252.50" >武威铁路运输检察院</a>
</li>
<li>
<a target="_blank" href="#">西宁铁路运输检察院</a>
</li>
<li>
<a target="_blank" href="#">银川铁路运输检察院</a>
</li>
</ul>
<ul class="map">
<li>
<img th:src="@{/home/base/map3.png}">
<a class="font1" target="_blank" href="http://143.212.248.10" title="兰州铁路运输检察院">
<img th:src="@{/home/base/2Dmap.png}" class="lantie">
<span>兰州</span>
</a>
<a class="font2" target="_blank" href="http://143.212.252.50" title="武威铁路运输检察院">
<img th:src="@{/home/base/2Dmap.png}" class="wutie">
<span>武威</span>
</a>
<a class="font3" target="_blank" href="#" title="西宁铁路运输检察院">
<img th:src="@{/home/base/2Dmap.png}" class="xitie">
<span>西宁</span>
</a>
<a class="font4" target="_blank" href="#" title="银川铁路运输检察院">
<img th:src="@{/home/base/2Dmap.png}" class="yintie">
<span>银川</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--底部-->
<th:block th:include="home_footer :: home_footer"/>
<script th:src="@{/home/lib/layui.js}"></script>
<script th:src="@{/js/base/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/base/owl-carousel/owl.carousel.js}"></script>
<style>
#owl-demo .item{
background-color: rgba(30,159,255,0.11);
padding: 30px 0px;
margin: 10px;
color: #FFF;
display:flex;
align-items:center;
justify-content:center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
transition: all 0.3s;
}
#owl-demo .item:hover {
transform: translateY(-5%);
}
#owl-demo .item span{
display:inline-block;
width:50px;
height:50px;
border-radius:50%;
font-size:28px;
line-height:50px;
background-color:rgba(27, 110, 196, 0.68);
}
.customNavigation{
text-align: center;
}
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items :8,
itemsDesktop : [1500,5],
itemsDesktopSmall : [900,3],
itemsTablet: [600,2],
itemsMobile : false
});
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
});
</script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function () {
var currentUrl = location.href;
// 获取所有的<a>标签
var links = document.querySelectorAll('a');
// 遍历每个链接，并判断其href属性是否与当前URL相同
for (var i = 0; i < links.length; i++) {
if (links[i].href === currentUrl) {
// 添加layui-this类名到对应的父元素的class中
links[i].parentNode.classList.add('layui-this');
}
}
});
layui.use(function () {
var carousel = layui.carousel;
// 渲染 - 图片轮播
carousel.render({
elem: '#ID-carousel-demo-image',
autoplay: true,
interval: 4000,
indicator: 'outside',
width: '650px',
height: '433px',
anim: 'fade',
});
});
//返回顶部
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var backToTopBtn = document.getElementById("back-to-top");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTopBtn.style.display = "block";
} else {
backToTopBtn.style.display = "none";
}
}
function scrollToTop() {
window.scrollTo({
top:0,
behavior:"smooth"
});
}
//视频
var videos = document.getElementsByTagName("video");
var videoHover = document.querySelector('.right').getElementsByTagName("li");
for (var i = 0; i < videos.length; i++) {
videos[0].autoplay = true;
videos[0].loop = true;
videos[0].preload = true;
videos[0].muted = true;
// 使用闭包确保在事件监听器中能够正确访问到当前的 video 元素
(function(index) {
videos[index].addEventListener('mouseover', function() {
videos[index].controls = true;
});
videos[index].addEventListener('mouseout', function() {
videos[index].controls = false;
});
})(i);
}
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showNextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
setInterval(showNextSlide, 3000); // Change every 3 seconds
</script>
</body>
</html>