效果图如下展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
<title>jquery实现公告列表无缝循环轮播</title>
<script src="../vendor/jquery/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
#scroll_list_box {
display: flex;
align-items: center;
justify-content: center;
}
.ul_wrap {
width: 50%;
height: 310px;
display: flex;
justify-content: center;
align-items: center;
background-color: antiquewhite;
}
.list_ul {
height: 160px;