效果参见 http://www.3zang.tech/ 我们的产品服务
思路：定义posArr和indexArr来记录位置和顺序，这部分还要再重构下，重复的有点多
举个例子
最开始所有图片的位置是
[0, 310, 620, 1760, 2140, 2520, 2900, 3280, 3660, 4040, -380]
图片位置是（肉眼看到的）
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
点击左侧一张图片后，后面的图片向左侧插入，整体右移
[310, 620, 1760, 2140, 2520, 2900, 3280, 3660, 4040, -380, 0]-－第一张图片位置从0 变为310
图片位值是（第一张图片位置到2，中间来）
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 1] －－－这么理解，第一张图片位置在肉眼看到的位置2
如果是右移动，相反
开始位置
[0, 310, 620, 1760, 2140, 2520, 2900, 3280, 3660, 4040, -380]
右边移动后
[-380, 0, 310, 620, 1760, 2140, 2520, 2900, 3280, 3660, 4040]
图片位置
[11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
从顺序上看，位置2的图片是active的，不缩放
js部分
proService: function(){ //产品服务3D轮播
var speed = this.pollingTime;
var $wrap = $('.card-wrap');
var widthWrap = $wrap.outerWidth();
var $items = $('.card-item');
var width = $items.outerWidth();
var n = $items.length;
var on = true; // 点击切换开关,false为不允许切换
var posArr = [], indexArr = [];
for(var i=1; i<=n; i++){
if(i == 1){
posArr.push(0);
}else if(i == 2){
posArr.push((widthWrap-width)/2);
}else if(i == 3){
posArr.push(widthWrap-width);
}else if(i == n){
posArr.push(-width);
}else{
posArr.push(widthWrap+width*(i-2));
}
indexArr.push(i);
}
//var posArr = [ 0, (widthWrap-width)/2 , widthWrap-width, widthWrap+width*2, widthWrap+width*3, widthWrap+width*4, widthWrap+width*5,widthWrap+width*6,widthWrap+width*7,widthWrap+width*8,widthWrap+width*9,widthWrap+width*10, -width ];
//var indexArr = [1,2,3,4,5,6,7,8,9,10,11,12,13];
$items.each(function(index, item){
var scale = 0.85;
if($(item).hasClass('active')){
scale = 1;
}
$(item).css('-ms-transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
$(item).css('-webkit-transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
$(item).css('transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
});
// 布局好之后显示
$('.card-wrap').css({opacity: 1});
$(document).on('click', '.card-wrap .card-item', function(){
// 不允许点击切换
if(!on){ return; }
var index = indexArr[$(this).index()];
var activeIndex;
console.log(posArr,'before');
if(index === 1){ //向左
posArr.push(posArr.shift(posArr[0]));
indexArr.push(indexArr.shift(indexArr[0]));
console.log(posArr,'left');
activeIndex = 0;
}else if(index === 3){ //向右
posArr.unshift(posArr.pop(posArr[0]));
indexArr.unshift(indexArr.pop(indexArr[0]));
activeIndex = n-1;
console.log(posArr,'right');
}else{
return;
}
on = false; // 已经开始切换，不允许点击切换
$items.each(function(index, item){
if(indexArr[index] === activeIndex){
$(item).css('opacity', 0);
}else{
$(item).css('opacity', 1);
}
$(item).removeClass('active');
if(indexArr[index] === ((n-1)/2 - 3)){
$(item).addClass('active');
}
var scale = 0.85;
if($(item).hasClass('active')){
scale = 1;
var idx = $(item).index();
if(idx < 3){
$('.product-title h2').eq(0).addClass('active').siblings().removeClass('active');
}else if(idx >= 3 && idx <7){
$('.product-title h2').eq(1).addClass('active').siblings().removeClass('active');
}else if(idx >= 7){
$('.product-title h2').eq(2).addClass('active').siblings().removeClass('active');
}
}
$(item).css('-ms-transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
$(item).css('-webkit-transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
$(item).css('transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
setTimeout(function(){
on = true;
}, 600);
});
});
var timer = setInterval(polling, speed);
$items.hover(function(){
clearTimeout(timer);
},function(){
timer = setInterval(polling, speed);
});
function polling(){
posArr.unshift(posArr.pop(posArr[0]));
indexArr.unshift(indexArr.pop(indexArr[0]));
activeIndex = n-1;
on = false; // 已经开始切换，不允许点击切换
$items.each(function(index, item){
if(indexArr[index] === activeIndex){
$(item).css('opacity', 0);
}else{
$(item).css('opacity', 1);
}
$(item).removeClass('active');
if(indexArr[index] === ((n-1)/2 - 3)){
$(item).addClass('active');
}
var scale = 0.85;
if($(item).hasClass('active')){
scale = 1;
var idx = $(item).index();
if(idx < 3){
$('.product-title h2').eq(0).addClass('active').siblings().removeClass('active');
}else if(idx >= 3 && idx <7){
$('.product-title h2').eq(1).addClass('active').siblings().removeClass('active');
}else if(idx >= 7){
$('.product-title h2').eq(2).addClass('active').siblings().removeClass('active');
}
}
$(item).css('-ms-transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
$(item).css('-webkit-transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
$(item).css('transform', 'translateX(' + posArr[index] + 'px) scale('+ scale +')');
setTimeout(function(){
on = true;
}, 600);
});
}
}
};
html部分
<section className="g-section g-product" id="product">
<div className="c-layout">
<div className="m-shadow-title">
<div className="u-shadow">SERVICE</div>
<h1>我们的产品服务</h1>
</div>
<div className="m-product-content">
<div className="product-title clearfix">
<h2 className="c-fl active">结构性贸易</h2>
<h2 className="c-fl center">供应链物流</h2>
<h2 className="c-fl">产业链金融</h2>
</div>
<div className="product-content clearfix" id="tslide">
<div className="card-wrap">
<ul>
<li className="card-item">
<div className="img-box">
<img src="images/product10.png" />
</div>
<h3>采购代理</h3>
<p>对接优质供应商<br/>铺设降低采购成本的新途径</p>
<a href="/b2b_purchaseAgent" className="u-more-style1">查看详情</a>
</li>
<li className="active card-item">
<div className="img-box">
<img src="images/product1.png" />
</div>
<h3>分销代理</h3>
<p>依托英迈一站式分销代理服务<br/>为厂商和分销商创造商机和利润空间</p>
<a href="/b2b_distributionAgent" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product0.png" />
</div>
<h3>信用评估</h3>
<p>平台采集海量贸易信息的大数据<br/>依据评估模型给出信用评级方案</p>
<a href="/b2b_creditRating" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product2.png" />
</div>
<h3>全球速递</h3>
<p>依托海航集团丰富的空运海运资源<br/>建设了发达的全球物流配送网络</p>
<a href="/service_gTransport" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product3.png" />
</div>
<h3>仓配一体</h3>
<p>自建智能仓库，数据驱动优化仓配资源分配，减少环节提升效率节省资源。</p>
<a href="/service_warehouseIntegration" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product4.png" />
</div>
<h3>冷链物流</h3>
<p>服务类型涵盖生鲜食品，医药产品，超低温物品，高端电子产品，时效精准，可靠安全。</p>
<a href="/service_coldChanLogistics" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product5.png" />
</div>
<h3>工程物流</h3>
<p>拥有跨行业，跨区域，跨国高精尖设备和人才，能承接多式联运国内外大型物流业务，安全性高。</p>
<a href="/service_projectLogistics" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product6.png" />
</div>
<h3>存货融资</h3>
<p>提供国内外存货融资，在线申请，快速到账，定期额度上调，解决现金流后顾之忧。</p>
<a href="/service_inventoryFinancing" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product7.png" />
</div>
<h3>应收融资</h3>
<p>满足企业临时资金周转、扩大生产规模、应对大促销售、优化财务报表等需求，助力企业快速成长。
</p>
<a href="/service_receivableFinancing" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product8.png" />
</div>
<h3>预付融资</h3>
<p>信息多方实时共享，提升财务管理效率，提前防范上游厂商业务风险，提高决策速度。</p>
<a href="/service_prepaidFinancing" className="u-more-style1">查看详情</a>
</li>
<li className="card-item">
<div className="img-box">
<img src="images/product9.png" />
</div>
<h3>信用小贷</h3>
<p>基于大数据信用评级<br/>快速发放小额贷款</p>
<a href="/service_pettyLoan" className="u-more-style1">查看详情</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
.m-product-content{
margin-top: 20px;
}
.m-product-content .product-title{
border-bottom:2px solid #ddd;
}
.m-product-content .product-title h2{
width:33%;
text-align:center;
margin-bottom: -2px;
padding:20px 0px;
}
.m-product-content .product-title h2.active{
border-bottom: 3px solid #eb4b51;
}
.m-product-content .product-title h2.center{
width:34%;
}
.m-product-content .product-content{
width:100%;
height:590px;
position:relative;
overflow:hidden;
}
.m-product-content .product-content .card-wrap{
position:absolute;
height:100%;
width: 100%;
opacity: 0;
}
.m-product-content ul li{
margin-top: 65px;
width: 380px;
height: 500px;
background:#fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
overflow: hidden;
position:absolute;
top:0px;
z-index:1;
text-align:center;
left:0px;
-webkit-transition: -webkit-transform .6s;
transition: -webkit-transform .6s;
transition: transform .6s;
transition: transform .6s,-webkit-transform .6s;
}
.m-product-content ul li:hover .u-more-style1{
color: #ed5c61;
border-color: #ed5c61;
}
.m-product-content ul li .img-box{
width:100%;
height:190px;
overflow:hidden;
}
.m-product-content ul li .img-box img{
width:100%;
height:100%;
}
.m-product-content ul li h3 {
text-align: center;
font-size: 16px;
font-weight: normal;
margin-top: 30px;
}
.m-product-content ul li p {
padding: 20px 40px 15px 40px;
line-height: 24px;
color: #888;
height: 85px;
overflow: hidden;
}
.m-product-content ul li.active{
margin-top: 65px;
z-index: 10;
-moz-box-shadow: 0 0px 30px 0 rgba(88,123,179,0.3);
-webkit-box-shadow: 0 0px 30px 0 rgba(88,123,179,0.3);
box-shadow: 0 0px 30px 0 rgba(88,123,179,0.3);
}
.m-product-content ul li.active .img-box{
height:240px;
}
.m-product-content ul li.active p{
padding: 30px 40px 20px 40px;
}
扫一扫
1506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
