你能帮我解决一下如何从滑块上创建图像,图像1.jpg和2.jpg加载一次,2a,2b,3.jpg将继续加载。所以循环应该看起来像1,2,2a,2b,3.jpg当它再次循环时它是2a,2b,3.jpg。希望你提前感谢我帮助
这是代码。
<section id="slider" class="slider-parallax revslider-wrap clearfix">
<div class="slider-parallax-inner">
<div class="tp-banner-container rev_slider_wrapper fullscreen-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->
<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/1.jpg" data-saveperformance="off" data-title="" >
<img src="images/slider/rev/main/1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<!-- LAYER NR. 1 -->
<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
data-forcerewind="on"
data-volume="mute"
data-videowidth="100%"
data-videoheight="100%"
data-videomp4="images/upcnew.mp4"
data-videopreload="preload"
data-videoloop="none"
data-forceCover="1"
data-aspectratio="16:9"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
>
</div>
</li>
<li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2.jpg" data-delay="3000" data-saveperformance="off" data-title="">
<img src="images/slider/rev/main/2.jpg" alt="kenburns6" data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >
</li>
<li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2a.jpg" data-delay="3000" data-saveperformance="off" data-title="">
<img src="images/slider/rev/main/2a.jpg" alt="kenburns6" data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >
</li>
<li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2b.jpg" data-delay="3000" data-saveperformance="off" data-title="">
<img src="images/slider/rev/main/2b.jpg" alt="kenburns6" data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >
</li>
<li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/3.jpg" data-delay="5000" data-saveperformance="off" data-title="">
<img src="images/slider/rev/main/3.jpg" alt="kenburns6" data-bgposition="left top" data-kenburns="on" data-duration="5000" ata-delay="5000" data-ease="Linear.easeNone" >
<!-- scroll down -->
<a href="#" data-scrollto="#section-about" class="one-page-arrow dark">
<i class="icon-angle-down infinite animated fadeInDown"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
JQUERY
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
var apiRevoSlider = tpj('.tp-banner').show().revolution(
{
sliderType:"standard",
jsFileLocation:"include/rs-plugin/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
responsiveLevels:[1200,992,768,480,320],
startwidth:1140,
startheight:600,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:3,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
/* style: "hermes",
enable: true,*/
hide_onmobile: false,
/* hide_onleave: false,*/
/* tmp: '<div class="tp-arr-allwrapper"> <div class="tp-arr-imgholder"></div> <div class="tp-arr-titleholder">{{title}}</div> </div>',*/
left: {
/* h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0*/
},
right: {
/* h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0*/
}
}
},
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
parallax:"mouse",
parallaxBgFreeze:"on",
parallaxLevels:[8,7,6,5,4,3,2,1],
parallaxDisableOnMobile:"on",
keyboardNavigation:"on",
shadow:0,
fullWidth:"off",
fullScreen:"on",
spinner:"spinner0",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
forceFullWidth:"off",
fullScreenAlignForce:"off",
minFullScreenHeight:"400",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500,
hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
fullScreenOffset:"0px"
});
apiRevoSlider.bind("revolution.slide.onloaded",function (e) {
setTimeout( function(){ SEMICOLON.slider.sliderParallaxDimensions(); }, 200 );
});
apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {
SEMICOLON.slider.revolutionSliderMenu();
});
}); //END REVOLUTION SLIDER
</script>