Browse Source

轮播图添加

master
xuhuajiao 2 years ago
parent
commit
eba39ec306
  1. 12
      css/swiper.min.css
  2. BIN
      images/largeScreen/screen.png
  3. BIN
      images/largeScreen/screen1.png
  4. BIN
      images/largeScreen/screen2.png
  5. BIN
      images/largeScreen/screen3.png
  6. BIN
      images/largeScreen/screen4.png
  7. BIN
      images/largeScreen/screen5.png
  8. BIN
      images/largeScreen/screen6.png
  9. BIN
      images/largeScreen/screen7.png
  10. 54
      index.html
  11. 11
      js/index.js
  12. 13
      js/swiper.min.js

12
css/swiper.min.css
File diff suppressed because it is too large
View File

BIN
images/largeScreen/screen.png

Before

Width: 905  |  Height: 579  |  Size: 166 KiB

BIN
images/largeScreen/screen1.png

After

Width: 939  |  Height: 450  |  Size: 106 KiB

BIN
images/largeScreen/screen2.png

After

Width: 940  |  Height: 451  |  Size: 108 KiB

BIN
images/largeScreen/screen3.png

After

Width: 940  |  Height: 450  |  Size: 58 KiB

BIN
images/largeScreen/screen4.png

After

Width: 1024  |  Height: 491  |  Size: 47 KiB

BIN
images/largeScreen/screen5.png

After

Width: 935  |  Height: 448  |  Size: 74 KiB

BIN
images/largeScreen/screen6.png

After

Width: 940  |  Height: 450  |  Size: 106 KiB

BIN
images/largeScreen/screen7.png

After

Width: 949  |  Height: 451  |  Size: 41 KiB

54
index.html

@ -12,7 +12,33 @@
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> <link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="iconfont/iconfont.css"> <link rel="stylesheet" href="iconfont/iconfont.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css">
<style>
.swiper-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.swiper-slide {
width: 940px;
height: 450px;
margin-top: 100px;
}
.my-bullet{
display: inline-block;
width: 26px;
height: 2px;
background-color: #c0c4cc;
opacity: .24;
position: relative;
margin: 0 2px;
}
.swiper-pagination-bullet-active {
background-color: #c0c4cc;
opacity: 1;
}
</style>
</head> </head>
<body> <body>
@ -83,7 +109,32 @@
</div> </div>
<div class="env-main-middle"> <div class="env-main-middle">
<div class="env-3d"> <div class="env-3d">
<img src="/images/largeScreen/screen.png" alt="" />
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/largeScreen/screen1.png" alt="" />
</div>
<div class="swiper-slide" >
<img src="images/largeScreen/screen2.png" alt="" />
</div>
<div class="swiper-slide" >
<img src="images/largeScreen/screen3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="images/largeScreen/screen4.png" alt="" />
</div>
<div class="swiper-slide" >
<img src="images/largeScreen/screen5.png" alt="" />
</div>
<div class="swiper-slide" >
<img src="images/largeScreen/screen6.png" alt="" />
</div>
<div class="swiper-slide" >
<img src="images/largeScreen/screen7.png" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<ul class="screen-env-list middle-env"> <ul class="screen-env-list middle-env">
</ul> </ul>
</div> </div>
@ -229,6 +280,7 @@
<script type="text/javascript" src="/js/flexible.js"></script> <script type="text/javascript" src="/js/flexible.js"></script>
<script type="text/javascript" src="/iconfont/iconfont.js"></script> <script type="text/javascript" src="/iconfont/iconfont.js"></script>
<script type="text/javascript" src="/js/jquery.countTo.js"></script> <script type="text/javascript" src="/js/jquery.countTo.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script type="text/javascript" src="/js/countTo.js"></script> <script type="text/javascript" src="/js/countTo.js"></script>
<script type="text/javascript" src="/js/number.js"></script> <script type="text/javascript" src="/js/number.js"></script>
<script type="text/javascript" src="/js/util.js"></script> <script type="text/javascript" src="/js/util.js"></script>

11
js/index.js

@ -9,6 +9,17 @@ timer = setInterval(() => {
$('.current-date').html(nowDate) $('.current-date').html(nowDate)
}, 1000) }, 1000)
var swiper = new Swiper('.swiper-container', {
autoplay: {
delay: 3000, // 自动切换时间间隔
},
pagination: {
el: '.swiper-pagination', // 分页器容器
clickable: true, // 点击分页器切换
bulletClass : 'my-bullet',//需设置.my-bullet样式
},
});
var echartsTimer = null var echartsTimer = null
// 定时请求第三方数据,更新页面数据 // 定时请求第三方数据,更新页面数据
echartsTimer = setInterval(() => { echartsTimer = setInterval(() => {

13
js/swiper.min.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save