我有一个分数滑块，我有多个幻灯片，有多个图像元素，我想分别控制每个元素的动画速度。但我已经尝试了他们提供的所有分数滑块选项。但它会对全球所有元素产生影响。
这是我的HTML：
<div class="slider-wrapper">
<div class="responisve-container">
<div class="slider">
<div class="fs_loader"></div>
<div class="slide">
<img src="images/decorative-arrow.png" width="140" height="160" data-position="0,5" data-in="right" data-delay="0" data-out="left" data-delay="100">
<img src="images/chritmas-letter.png" width="400" height="412" data-position="0,730" data-in="top" data-delay="150" data-out="left">
<img src="images/photos.png" width="720" height="365" data-position="20,50" data-in="left" data-delay="500">
<img src="images/christmas-gift.png" width="280" height="148" data-position="380,5" data-in="bottomLeft" data-delay="200" data-out="fade">
<img src="images/banner-text.png" width="373" height="135" class="claim light-green" data-position="330,260" data-in="top" data-out="bottom" data-delay="900">
<img src="images/white-letter.png" width="265" height="302" data-position="150,1100" data-in="bottom" data-delay="1100" data-out="right">
<img src="images/red-envelope.png" width="280" height="200" data-position="0,1090" data-in="bottom" data-delay="1100" data-out="right">
</div>
<div class="slide" data-in="slideLeft">
<img src="images/camping-banner/letter-to-dad.png" width="543" height="534" data-position="0,680" data-in="top" data-out="bottom">
<img src="images/camping-banner/camping-img-1.png" width="262" height="295" data-position="40,5" data-in="right" data-delay="200" data-out="left" style="width:65% !important; height:auto !important;">
<img src="images/banner-text.png" width="373" height="135" data-position="40,300" data-in="top" data-out="bottom" data-delay="1000">
<img src="images/camping-banner/ear-phone.png" width="224" height="320" data-position="160,1140" data-in="left" data-out="right" data-delay="1500">
<img src="images/camping-banner/camera.png" width="241" height="250" data-position="0,1125" data-in="left" data-out="bottom" data-delay="800">
<img src="images/camping-banner/college-days-banner-pen.png" width="260" height="75" data-position="0,920" data-in="left" data-out="bottom" data-delay="800">
<img src="images/camping-banner/camping-img-3.png" width="288" height="313" data-position="180,450" data-in="right" data-out="right" data-delay="300">
<img src="images/camping-banner/camping-img-2.png" width="243" height="279" data-position="170,235" data-in="right" data-out="right" data-delay="1200">
</div>
<div class="slide" data-in="slideLeft">
<img src="images/stay-home-banner/letter-to-mom.png" width="471" height="470" data-position="0,-5" data-in="top" data-out="bottom">
<img src="images/stay-home-banner/butterfly.png" width="135" height="145" data-position="306,22" data-in="top" data-out="bottom" data-delay="500">
<img src="images/stay-home-banner/stay-home-pen.png" width="367" height="172" data-position="310,8" data-in="bottom" data-delay="800" data-out="right">
<img src="images/banner-text.png" width="373" height="135" class="claim light-green" data-position="5,530" data-in="top" data-out="bottom" data-delay="1500">
<img src="images/stay-home-banner/stay-home-pic-2.png" width="287" height="313" data-position="160,615" data-in="right" data-delay="1500" data-out="left" style="width:65% !important; height:auto !important;">
<img src="images/stay-home-banner/stay-home-pic-3.png" width="245" height="279" data-position="125,880" data-in="right" data-delay="800" data-out="left" style="width:65% !important; height:auto !important;">
<img src="images/stay-home-banner/stay-home-pic-1.png" width="262" height="294" data-position="135,390" data-in="right" data-delay="200" data-out="left" style="width:65% !important; height:auto !important;">
<img src="images/stay-home-banner/white-envelope.png" width="224" height="274" data-position="170,1150" data-in="left" data-delay="650" data-out="right">
<img src="images/stay-home-banner/booquet-new.png" width="351" height="286" data-position="0,1020" data-in="left" data-delay="100" data-out="right">
<img src="images/stay-home-banner/bottle.png" width="182" height="164" data-position="25,355" data-in="bottom" data-delay="1800" data-out="right">
</div>
<div class="slide" data-in="slideLeft">
<img src="images/college-days-banner/college-days-letter.png" width="543" height="534" data-position="0,680" data-in="top" data-out="bottom">
<img src="images/college-days-banner/college-days-pic-1.png" width="262" height="295" data-position="40,5" data-in="right" data-delay="200" data-out="left" style="width:65% !important; height:auto !important;">
<img src="images/banner-text.png" width="373" height="135" class="claim light-green" data-position="40,300" data-in="top" data-out="bottom" data-delay="1000">
<img src="images/college-days-banner/ear-phone.png" width="224" height="320" data-position="160,1140" data-in="left" data-out="right" data-delay="1500">
<img src="images/college-days-banner/camera.png" width="241" height="250" data-position="0,1125" data-in="left" data-out="bottom" data-delay="800">
<img src="images/college-days-banner/college-days-banner-pen.png" width="260" height="75" data-position="0,920" data-in="left" data-out="bottom" data-delay="800">
<img src="images/college-days-banner/college-days-pic-3.png" width="288" height="313" data-position="180,450" data-in="right" data-out="right" data-delay="300">
<img src="images/college-days-banner/college-days-pic-2.png" width="243" height="279" data-position="170,235" data-in="right" data-out="right" data-delay="1200">
</div>
<div class="slide" data-in="slideLeft">
<img src="images/beach-day-letter.png" width="400" height="412" data-position="0,730" data-in="top" data-delay="10" data-out="left" style="width:65% !important; height:auto !important;">
<img src="images/banner-2-photos.png" width="570" height="465" data-position="30,20" data-in="right" data-out="right" data-delay="0" style="width:65% !important; height:auto !important;">
<img src="images/banner-text.png" width="373" height="135" class="claim light-green" data-position="80,300" data-in="top" data-out="bottom" data-delay="10">
<img src="images/white-letter.png" width="265" height="302" data-position="150,1100" data-in="bottom" data-delay="150" data-out="right">
<img src="images/coffee-mug.png" width="190" height="230" data-position="10,1150" data-in="bottom" data-delay="200" data-out="right">
</div>
</div>
</div>
</div> <!-- slider-wrapper closed -->
Jquery如下：
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1366,510",
'increase': false,
'pauseOnHover': false,
'slideEndAnimation': false,
'timeout' : 2500
});
答案 0 :(得分：2)
您可以尝试记录此滑块
根据您的要求尝试
{
'slideTransition' : 'none', // default slide transition
'slideTransitionSpeed' : 2000, // default slide transition time
'slideEndAnimation' : true, // if set true, objects will transition out before next slide moves in
'position' : '0,0', // default position | should never be used
'transitionIn' : 'left', // default in - transition
'transitionOut' : 'left', // default out - transition
'fullWidth' : false, // transition over the full width of the window
'delay' : 0, // default delay for elements
'timeout' : 2000, // default timeout before switching slides
'speedIn' : 2500, // default in - transition speed
'speedOut' : 1000, // default out - transition speed
'easeIn' : 'easeOutExpo', // default easing in
'easeOut' : 'easeOutCubic', // default easing out
'controls' : false, // controls on/off
'pager' : false, // pager inside of the slider on/off OR $('someselector') for a pager outside of the slider
'autoChange' : true, // auto change slides
'pauseOnHover' : false, // Pauses slider on hover (current step will still be completed)
'backgroundAnimation' : false, // background animation
'backgroundElement' : null, // element to animate | default fractionSlider element
'backgroundX' : 500, // background animation x distance
'backgroundY' : 500, // background animation y distance
'backgroundSpeed' : 2500, // default background animation speed
'backgroundEase' : 'easeOutCubic', // default background animation easing
'responsive' : false, // responsive slider (see below for some implementation tipps)
'increase' : false, // if set, slider is allowed to get bigger than basic dimensions
'dimensions' : '1000, 400',
/* IMPORTANT:
if you use the responsive option, you have to set dimensions to the origin (width,height) in px
you use for data-position,heights of elements, etc. */
'startCallback' : null, // callbacks, see below for more information on callbacks
'startNextSlideCallback' : null,
'stopCallback' : null,
'pauseCallback' : null,
'resumeCallback' : null,
'nextSlideCallback' : null,
'prevSlideCallback' : null,
'pagerCallback' : null
}
<强> more info