218 lines
6.9 KiB
HTML
218 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
|
||
<html lang="zh-cmn-Hans">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<meta name="description" content="基于SEO网站" />
|
||
<meta name="keywords" content="基于SEO网站" />
|
||
<meta name="applicable-device" content="pc,mobile" />
|
||
<meta name="MobileOptimized" content="width" />
|
||
<meta name="HandheldFriendly" content="true" />
|
||
<meta name="robots" content="noarchive" />
|
||
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
|
||
<meta name="theme-color" content="#db5945">
|
||
<meta name="google" value="notranslate">
|
||
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
|
||
<title></title>
|
||
<link rel="stylesheet" type="text/css" href="../css/base.css" />
|
||
<link rel="stylesheet" href="../css/swiper.min.css">
|
||
<link rel="stylesheet" type="text/css" href="../css/style.css" />
|
||
<script src="../js/swiper.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="main">
|
||
<img src="../imgs/gyber.png" class="ber" alt="">
|
||
<div class="con">
|
||
<div class="h100 mainCon mainInterview">
|
||
<div class="nav conNav navIpd">
|
||
<div class="navTop">
|
||
<img src="../imgs/logo.png" alt="">
|
||
</div>
|
||
<div class="navLsit">
|
||
<a href="./contentPage.html">盛堂世家</a>
|
||
<a href="./indexBrand.html">盛堂品牌</a>
|
||
<a href="./aboutUs.html">關於Allen Zhou</a>
|
||
<a href="./honoraryCertificate.html">資質榮譽
|
||
<object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a
|
||
href="./Interview.html">人物專訪</a></object>
|
||
</a>
|
||
<a href="./projectIntroduction.html">項目介紹</a>
|
||
<a href="./brand.html">名品軟裝</a>
|
||
<a class="on" href="./engineering.html">工程工藝 </a>
|
||
<a href="./contactUs.html">聯繫我們</a>
|
||
</div>
|
||
</div>
|
||
<div class="projectIntroductionCon siteImageW">
|
||
<div class="">
|
||
<p class="title">工程工藝</p>
|
||
<div class="select">
|
||
<select name=" " onchange="selectFun()" id="">
|
||
<option value="">工地形象</option>
|
||
<option value="./engineering.html">工艺</option>
|
||
</select>
|
||
</div>
|
||
<script>
|
||
function selectFun(e) {
|
||
window.location = event.target.value
|
||
}
|
||
</script>
|
||
</div>
|
||
<div class="siteImage">
|
||
<div class="listImg">
|
||
<img class="siteImageOn" src="../imgs/img.png" alt="">
|
||
</div>
|
||
<div class="siteImageButton">
|
||
<div class="swiper-a"><img src="../imgs/jta.png" alt=""></div>
|
||
<div class="swiper-container siteImageSwiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="swiperImg">
|
||
<img src="../imgs/img.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="swiperImg">
|
||
<img src="../imgs/im2.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="swiperImg">
|
||
<img src="../imgs/im3.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="swiperImg">
|
||
<img src="../imgs/im4.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="swiperImg">
|
||
<img src="../imgs/img.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="swiperImg">
|
||
<img src="../imgs/img.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-b"><img src="../imgs/jta.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<a href="">Copyright 2022 盛堂世家設計機構 All rights reserved 蜀ICP備12345678號 技术支持：全美网络 </a>
|
||
</div>
|
||
<script src="../js/jquery.min.js"></script>
|
||
<div class="navCon">
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
<a href="/" class="returnIndex">
|
||
<img src="../imgs/home.png" alt="">
|
||
</a>
|
||
<script>
|
||
let effect = 0
|
||
var swiper = new Swiper('.swiper-container', {
|
||
loop: true,
|
||
speed: 1000,
|
||
slidesPerView: 5,
|
||
centeredSlides: true,
|
||
watchSlidesProgress: true,
|
||
on: {
|
||
setTranslate: function() {
|
||
slides = this.slides
|
||
for (i = 0; i < slides.length; i++) {
|
||
slide = slides.eq(i)
|
||
progress = slides[i].progress
|
||
//slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
|
||
slide.css({
|
||
'opacity': '',
|
||
'background': ''
|
||
});
|
||
slide.transform(''); //清除样式
|
||
|
||
slide.transform('scale(' + (0.9 - Math.abs(progress) / 8) + ')');
|
||
|
||
|
||
}
|
||
},
|
||
transitionEnd: function() {
|
||
|
||
console.log(this.activeIndex)
|
||
|
||
|
||
$(".siteImageOn").attr("src", $(".swiper-slide-active img").attr("src"))
|
||
|
||
},
|
||
setTransition: function(transition) {
|
||
for (var i = 0; i < this.slides.length; i++) {
|
||
var slide = this.slides.eq(i)
|
||
slide.transition(transition);
|
||
}
|
||
},
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-a',
|
||
prevEl: '.swiper-b',
|
||
},
|
||
// pagination: {
|
||
// el: '.swiper-pagination',
|
||
// clickable: true,
|
||
// },
|
||
});
|
||
|
||
// const pe = document.getElementById('progressEffect');
|
||
// pe.onchange = function () {
|
||
// effect = this.value
|
||
// swiper.update();
|
||
// }
|
||
// mySwiper = new Swiper('.swiper-container', {
|
||
// // paginationClickable: true,
|
||
// observer: true,
|
||
// observeParents: true,
|
||
// // initialSlide: swipIndex,
|
||
// effect: 'coverflow',
|
||
// centeredSlides: true,
|
||
// spaceBetween: '0%',
|
||
// slidesPerView: 5,
|
||
// loop: true,
|
||
// // autoplay: {
|
||
// // disableOnInteraction: false,
|
||
// // },
|
||
// navigation: {
|
||
// //
|
||
// },
|
||
// navigation: {
|
||
// nextEl: '.swiper-a',
|
||
// prevEl: '.swiper-b',
|
||
// },
|
||
// coverflowEffect: {
|
||
// rotate: 0, //slide做3d旋转时Y轴的旋转角度
|
||
// stretch: 298, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
|
||
// depth: 200, //slide的位置深度。值越大z轴距离越远，看起来越小。
|
||
// modifier: 1.2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
|
||
// slideShadows: false,
|
||
// },
|
||
// on: {
|
||
// transitionEnd: function () {
|
||
|
||
// console.log(this.activeIndex)
|
||
|
||
|
||
// $(".siteImageOn").attr("src", $(".swiper-slide-active img").attr("src"))
|
||
|
||
// }
|
||
// }
|
||
// });
|
||
</script>
|
||
</body>
|
||
<script src="../js/navBar.js"></script>
|
||
</html>
|