我正在使用来自https://github.com/NewSignature/jcoverflip的Jcoverflip(http://it.post80s.com/jquery-auto-play-jcoverflip)的自定义代码。它解决了我遇到的一个问题,但是在实现它之后,我的旋转木马中的图像的大小不会像在jcoverflip.com的演示中看到的那样逐渐减小。中心图像左右两侧的第2,第3等图像大小相同。
下面是定制的JS,我可以修改它以包括从中心输出的第2个,第3个元素的大小减小,即添加另一个适用于这些图像的名为“otherPicTwo”的变量吗?所有其他代码都直接来自jcoverflip下载。
感谢您的帮助,我可以很好地修改代码,但很少从头开始编写JS。
/*The center picture has 178px in width*/
var centerPic = 178;
/*Other pictures should have 118px in width*/
var otherPic = 118;
//You can adjust the following position params
var centerPos = 101; var spaceRightCenterLeft = 74;
/* Spaces between pictures/frames */
var spaceOther = 118;
jQuery( document ).ready( function(){
jQuery( '#flip' ).jcoverflip({
current: 2,
time: 600, //animation transition period
beforeCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - (centerPos/2+otherPic) -spaceRightCenterLeft - spaceOther*offset )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.65, width: otherPic +'px' }, {} )
];
},
afterCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + spaceRightCenterLeft +25 + spaceOther*offset )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.65, width: otherPic +'px' }, {} )
];
},
currentCss: function( el, container ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - centerPos )+'px', bottom: '-38px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { opacity: 1.0, width: centerPic +'px' }, { } )
];
}
});
答案 0 :(得分:2)
看起来您每次都没有减少li
元素的宽度。这意味着它与使用宽度作为变量otherPic
一样保持不变。
以下代码可能会对您有所帮助。
jQuery( document ).ready( function(){
var videoreelmove = true;
jQuery("#flip").hover(function() { videoreelmove = false; }, function() {videoreelmove = true; });
jQuery("#flipnav").hover(function() { videoreelmove = false; }, function() {videoreelmove = true; });
setInterval(function() {
if(videoreelmove) {
$('#flip').jcoverflip('next', '1', true);
}
}, 5000);
jQuery( '#flip' ).jcoverflip({
current: 2,
time: 600, //animation transition period
beforeCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 250 - 130*offset -10*offset )+'px', top: '30px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(0,130-20*offset*offset) + 'px' }, {} )
];
},
afterCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 100 + 160*offset + 10*offset)+'px', top: '30px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(0,130-20*offset*offset) + 'px' }, {} )
];
},
currentCss: function( el, container ){
/* jQuery('#flip>li.selected').removeClass('selected');
el.addClass('selected');*/
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 90 )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: '180px' }, { } )
];
},
change: function(){ $('#flip li:first').appendTo('#flip'); }
});
jQuery('#scrollbar').slider({
value: 50,
stop: function(event, ui) {
if(event.originalEvent) {
var newVal = Math.round(ui.value/25);
jQuery( '#flip' ).jcoverflip( 'current', newVal );
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
<!-- Navigation buttons-->
$('.flipnext').click(function(){
var i = $('#flip').jcoverflip('next');
i.next();
});
$('.flipprev').click(function(){
var i = $('#flip').jcoverflip('previous');
i.next();
});
});