image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="box">
<div class="top">
<img src="./img/title.png">
</div>
<div class="list">
<!-- <div class="left-arow"><</div>
<div class="right-arow">></div> -->
<img src="./img/left.png" class="left-arow">
<img src="./img/right.png" class="right-arow">
<div class="list-box"></div>
<div class="list-box"></div>
<div class="list-box"></div>
<ul class="ul">
<li class="active1"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
$(document).ready(function () {
let index = 0
const num = $('.list .list-box').length
var move = 0
$('.right-arow').click(function(){
if(index >= num-1 ){
alert('请点击上一页')
return
}else{
index ++
$('.ul li').eq(index).addClass('active1').siblings().removeClass('active1')
move = move - 1200
}
$('.list .list-box').css({
"transform": `translateX(${move}px)`
})
})
$('.left-arow').click(function(){
if(index <= 0){
alert('请点击下一页')
return
}
index--
$('.ul li').eq(index).addClass('active1').siblings().removeClass('active1')
move = move + 1200
$('.list .list-box').css({
"transform": `translateX(${move}px)`
})
})
$('.ul li').click(function(){
$(this).addClass('active1').siblings().removeClass('active1')
index = $(this).index()
move = index * -1200
$('.list .list-box').css({
"transform": `translateX(${move}px)`
})
})
$('.ul li').each(function(i){
$(this).text(++i)
})
const boxList = [{
name: "内容管理 ",
src: "./img/nr.png",
content: '公共信息共享·数据资 源池·数据交换'
},
{
name: "项目管理",
src: "./img/xm.png",
content: '统一协同治理'
},
{
name: "房源及保障对象",
src: "./img/fy.png",
content: '民有所呼我有所应'
},
{
name: "转租转借管理",
src: "./img/zj1.png",
content: '统一身份认证'
},
{
name: "公租房申请/审核",
src: "./img/gz1.png",
content: '一站式新媒体服务'
},
{
name: "公租房申请/审核",
src: "./img/gz1.png",
content: '一站式新媒体服务'
},
]
boxList.forEach(item => {
let html = `
<div class="item">
<img src="./img/gzf.png">
<div>公租房申请</div>
<span>项目添加和管理、进度查询</span>
</div>
`
$('.list-box').append(html)
// $('#list-box2').append(html)
})
$('.box-item').click(function () {
$(this).addClass('active').siblings().removeClass('active')
})
});
</script>
</body>
</html>
