Lee
/
zzwy-news
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

首页新闻调整

master
Lee 2022-10-09 11:38:34 +08:00
parent 8282fcc885
commit 6f4da9289d
3 changed files with 10 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.css
View File

@ -332,8 +332,7 @@
} }
/* 指示点 */ /* 指示点 */
.news-swiper .swiper-pagination-bullet, .new-list .swiper-pagination-bullet {
.information-swiper .swiper-pagination-bullet {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-top: 16px !important; margin-top: 16px !important;
@ -342,13 +341,11 @@
background-color: rgba(14, 53, 127, 0); background-color: rgba(14, 53, 127, 0);
} }
.news-swiper .swiper-pagination-bullet:nth-of-type(1), .new-list .swiper-pagination-bullet:nth-of-type(1){
.information-swiper .swiper-pagination-bullet:nth-of-type(1) {
margin-top: 0; margin-top: 0;
} }
.news-swiper .swiper-pagination-bullet-active, .new-list .swiper-pagination-bullet-active{
.information-swiper .swiper-pagination-bullet-active {
background-color: rgba(14, 53, 127, .5); background-color: rgba(14, 53, 127, .5);
border: 0; border: 0;
} }
@ -3128,8 +3125,7 @@
} }
/* 分页样式 */ /* 分页样式 */
.news-swiper .swiper-pagination-bullet, .new-list .swiper-pagination-bullet {
.information-swiper .swiper-pagination-bullet {
width: .2rem; width: .2rem;
height: .2rem; height: .2rem;
margin: 0 .1rem !important; margin: 0 .1rem !important;

4
index.html
View File

@ -152,7 +152,7 @@
<!-- 资讯列表 --> <!-- 资讯列表 -->
<div class="new-list"> <div class="new-list">
<!-- 新闻列表 --> <!-- 新闻列表 -->
<div class="news-swiper swiper"> <div class="swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="wap-show"><img src="images/news-wap.jpg" alt="还山川秀丽 建绿色矿山"></div> <div class="wap-show"><img src="images/news-wap.jpg" alt="还山川秀丽 建绿色矿山"></div>
@ -198,7 +198,7 @@
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
</div> </div>
<!-- 动态列表 --> <!-- 动态列表 -->
<div class="information-swiper swiper"> <div class="swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="color-blue wap-show"><img src="images/news-wap.jpg" alt="还山川秀丽 建绿色矿山"></div> <div class="color-blue wap-show"><img src="images/news-wap.jpg" alt="还山川秀丽 建绿色矿山"></div>

41
js/script.js
View File

@ -59,7 +59,7 @@ $(function(){
}) })
if(window.innerWidth <= 960){ if(window.innerWidth <= 960){
// 公司新闻切换 // 公司新闻切换
var newsSwiper = new Swiper('.news-swiper',{ var newsSwiper = new Swiper('.new-list>.swiper',{
loop:true,//开启循环播放 loop:true,//开启循环播放
autoplay: {//开启自动播放 autoplay: {//开启自动播放
delay:2000, delay:2000,
@ -69,28 +69,13 @@ $(function(){
slidesPerView: "auto", slidesPerView: "auto",
centeredSlides:true, centeredSlides:true,
pagination: { pagination: {
el: '.news-swiper .swiper-pagination', el: '.new-list>.swiper .swiper-pagination',
clickable :true,
},
});
// 区域动态切换
var informationSwiper = new Swiper('.information-swiper',{
loop:true,//开启循环播放
autoplay: {//开启自动播放
delay:2000,
disableOnInteraction: false,//触摸后不会停止自动滚动
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
},
slidesPerView: "auto",
centeredSlides:true,
pagination: {
el: '.information-swiper .swiper-pagination',
clickable :true, clickable :true,
}, },
}); });
}else{ }else{
// 公司新闻切换 // 公司新闻切换
var newsSwiper = new Swiper('.news-swiper',{ var newsSwiper = new Swiper('.new-list>.swiper',{
direction: 'vertical', //向上 direction: 'vertical', //向上
loop:true,//开启循环播放 loop:true,//开启循环播放
autoplay: {//开启自动播放 autoplay: {//开启自动播放
@ -103,25 +88,7 @@ $(function(){
crossFade: true, crossFade: true,
}, },
pagination: { pagination: {
el: '.news-swiper .swiper-pagination', el: '.new-list>.swiper .swiper-pagination',
clickable :true,
},
});
// 区域动态切换
var informationSwiper = new Swiper('.information-swiper',{
direction: 'vertical', //向上
loop:true,//开启循环播放
autoplay: {//开启自动播放
delay:2000,
disableOnInteraction: false,//触摸后不会停止自动滚动
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
},
effect : 'fade',
fadeEffect: {
crossFade: true,
},
pagination: {
el: '.information-swiper .swiper-pagination',
clickable :true, clickable :true,
}, },
}); });