Skip to content

html / bdideal

Go to a project
Commit 8c577267 by hank
Options

我们的产品swiper

parent 1993f14f
Showing with 483 additions and 98 deletions
html/products.html
......@@ -73,7 +73,7 @@
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="container relative">
<div class="word-box">
<p class="line1"></p>
......@@ -131,7 +131,7 @@
<!-- animated rotateIn infinite -->
<img src="../img/earthselect.png" class="select " alt="" />
<div class="ctr-container">
<div class="left-btn ctr-btn" ></div>
<div class="left-btn ctr-btn"></div>
<div class="right-btn ctr-btn"></div>
</div>
</div>
......@@ -150,9 +150,11 @@
</div>
</div>
<div class="list">
<div class="text-right ctr"> <span class="spanbtn" id="slidePrev"> < </span> <span class="spanbtn" id="slideNext"> > </span></div>
<div class="text-right ctr"> <span class="spanbtn" id="slidePrev">
< </span> <span class="spanbtn" id="slideNext"> >
</span></div>
<div id="dashuju" class="list-item">
<div class="swiper-container swiper-container-horizontal swiper-container-multirow">
<div class="swiper-container swiper1" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
......@@ -162,6 +164,12 @@
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统0</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
......@@ -173,10 +181,16 @@
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统1</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" >
<div class="swiper-slide">
<div class="item">
<a href="">
......@@ -184,16 +198,28 @@
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统2</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" >
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统3</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
......@@ -204,6 +230,12 @@
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统4</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
......@@ -215,6 +247,12 @@
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统5</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
......@@ -226,6 +264,12 @@
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统6</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
......@@ -237,6 +281,12 @@
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统7</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
......@@ -248,97 +298,378 @@
<img src="http://bdideal.com/asset/img/homepro9.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统8</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" >
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统9</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="shuzizhanting" style="display: none;" class="list-item">
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="" /></a>
<div id="shuzizhanting" style="" class="list-item">
<div class="swiper-container swiper2" id="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<div class="img-container"></div>
</a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统0</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="1">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统1</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统2</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统3</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统4</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统5</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统6</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统7</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro9.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统8</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统9</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="shuzihudong" style="display: none;" class="list-item">
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" /></a>
<div id="shuzihudong" style="" class="list-item">
<div class="swiper-container swiper3" id="swiper3">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统0</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="1">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统1</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统2</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统3</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统4</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统5</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href="">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" /></a>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统6</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统7</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div>
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro9.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统8</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统9</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -404,14 +735,31 @@
</body>
<script>
$(document).ready(function () {
window.mySwiper = new Swiper('.swiper-container', {
window.mySwiper = new Swiper('#swiper1', {
slidesPerView: "auto",
slidesPerColumn: 2,
on: {
transitionEnd: function (swiper) {
// alert('过渡结束');
computeMasking(this)
},
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
window.mySwiper1 = new Swiper('#swiper2', {
slidesPerView: "auto",
slidesPerColumn: 2,
on:{
transitionEnd: function(swiper){
on: {
transitionEnd: function (swiper) {
// alert('过渡结束');
computeMasking()
// console.log(mySwiper.activeIndex)
computeMasking(this)
},
}
// spaceBetween: 30,
......@@ -423,14 +771,34 @@
// pagination: '.swiper-pagination'
});
$('#slidePrev').click(function(){
mySwiper.slidePrev(200,true,function(e) {
window.mySwiper2 = new Swiper('#swiper3', {
slidesPerView: "auto",
slidesPerColumn: 2,
on: {
transitionEnd: function (swiper) {
// alert('过渡结束');
computeMasking(this)
},
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
$("#swiper3").parent().hide()
$("#swiper3").parent().hide()
$('#slidePrev').click(function () {
mySwiper.slidePrev(200, true, function (e) {
console.log(e)
alert('slidePrev')
});
})
$('#slideNext').click(function(){
mySwiper.slideNext(200, true, function(e) {
$('#slideNext').click(function () {
mySwiper.slideNext(200, true, function (e) {
console.log(e)
alert('slideNext')
});
......@@ -462,39 +830,39 @@
list_item.hide();
mySwiper.slideTo(0, 1000, false);
list_item.eq(0).show();
list_item.eq(index+1).show();
list_item.eq(index + 1).show();
});
}
tab();
$('.earth .left-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', "../img/earth1.png");
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(0deg)'
})
$('.earth .left-btn').mousemove(function () {
$('.earth .earth-bg').attr('src', "../img/earth1.png");
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(0deg)'
})
})
$('.earth .right-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', "../img/earth2.png");
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(180deg)'
})
$('.earth .right-btn').mousemove(function () {
$('.earth .earth-bg').attr('src', "../img/earth2.png");
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(180deg)'
})
})
function computeMasking() {
var getTranslate = mySwiper.getTranslate();
function computeMasking(swiper) {
var getTranslate = swiper.getTranslate();
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = 860;
if(getTranslate/400 <= 0) {
console.log(totalWidth/200, Math.abs(getTranslate/400) +4)
if (getTranslate / 400 <= 0) {
console.log(totalWidth / 200, Math.abs(getTranslate / 400) + 4)
$('.swiper-slide').removeClass('show-mask')
for(var i=(totalWidth)/200;i>=Math.abs(getTranslate/400 *2) + 4; i--) {
for (var i = (totalWidth) / 200; i >= Math.abs(getTranslate / 400 * 2) + 4; i--) {
$('.swiper-slide').eq(i).addClass('show-mask');
}
}
}
computeMasking()
computeMasking(mySwiper)
});
</script>
......
style/products.less
......@@ -488,11 +488,13 @@ ul {
position: absolute;
opacity: 0;
transition: all 1s;
display: none;
}
}
.show-mask {
&::after {
opacity: 1;
display: block;
}
}
......@@ -520,13 +522,28 @@ ul {
width: 100%;
height: 100%;
}
.tag-list {
list-style: circle;
overflow: hidden;
width: 100%;
padding-left: 32px;
padding-top: 10px;
li {
list-style: disc;
float: left;
font-size: 12px;
padding-right: 22px;
color:rgba(0,0,0,0.6);
}
}
}
.item-title {
padding-left: 19px;
padding-top: 22px;
padding-top: 16px;
font-size:18px;
font-weight:400;
color:rgba(0,0,0,1);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment