Home > Web Front-end > JS Tutorial > body text

jQuery plug-in Slider Revolution implements responsive animation sliding picture switching effect_jquery

WBOY
Release: 2016-05-16 15:56:38
Original
2543 people have browsed it

This is a very powerful content switching plug-in. It is based on jQuery. It is fully responsive, supports mobile devices, supports mobile phone touch, and keyboard page turning; it has built-in slideshows and video playback timers, and it has various modes: automatic Definition, automatic response, full screen; it has a variety of animation effects, 3D effects... In short, it can do all the effects you think of, and its name is Slider Revolution.

HTML

Slider Revolution is a jQuery-based plug-in. When using it, you need to load the jQuery library file first, as well as the css and js files that Slider Revolution depends on.

<script src="js/jquery.js"></script> 
<link rel="stylesheet" href="css/style.css" media="screen" /> 
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> 
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 
Copy after login

The main HTML structure of content switching is as follows. div.tp-banner contains multiple

  • tags, and the switching content is placed in
  • , including main images, text, and button information. This information is paired with their respective data-attributes in order to be recognized by Slider Revolution.

    <div class="tp-banner-container"> 
     <div class="tp-banner" > 
      <ul> 
       <!-- SLIDE --> 
       <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > 
        <!-- MAIN IMAGE --> 
        <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
        <!-- LAYERS --> 
        <!-- LAYER NR. 1 --> 
        <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
         data-x="85" 
         data-y="224" 
         data-speed="500" 
         data-start="1200" 
         data-easing="Power4.easeOut">My Caption 
        </div> 
        ... 
     
       </li> 
       <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" > 
        <!-- MAIN IMAGE --> 
        <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
        <!-- LAYERS --> 
        <!-- LAYER NR. 1 --> 
        <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
         data-x="85" 
         data-y="224" 
         data-speed="500" 
         data-start="1200" 
         data-easing="Power4.easeOut">My Caption 
        </div> 
        ... 
       </li> 
       .... 
      </ul> 
     </div> 
    </div> 
    
    Copy after login

    jQuery call

    After the HTML structure is arranged, you can call the Slider Revolution plug-in. After pasting the above code, open the browser and you can see the switching effect.

     
    $(function() { 
     $('.tp-banner').revolution({ 
      delay:9000, 
      startwidth:1170, 
      startheight:500, 
      hideThumbs:10 
     }); 
    }); 
    
    Copy after login

    Option settings and descriptions

    Slider Revolution provides many parameter option settings:
    delay: the dwell time of sliding content. Default 9000 milliseconds
    startheight: sliding content height, default 490 pixels.
    startwidth: sliding content width, default 890 pixels.
    navigationType: Display the page turning icon, the default is "bullet" (dot), if set to "none" it will not be displayed. .
    navigationArrows: Displays page turning arrows. The default is nexttobullets, which means that the left and right page turning arrows are displayed when the mouse slides. If set to none, it will not be displayed.
    touchenabled: Whether touch sliding is allowed. The default is on, which is allowed. If set to off, it is not allowed.
    onHoverStop: Whether to enable pausing when the mouse slides, on: on, off: off.
    fullWidth: Whether to enable full-screen display of image content, on: on, off: off.

    Various effects can be set for each

  • tag:
    data-transition: content sliding effect, you can set the following values: boxslide, boxfade, slotzoom-horizontal, slotslide-horizontal, slotfade-horizontal, slotzoom-vertical, slotslide-vertical, slotfade-vertical, curtain-1, curtain-2, curtain -3, slideleft, slideright, slideup, slidedown, fade
    data-slotamount: The number of square blocks divided into when switching.
    data-link: image link
    data-delay: Set the dwell time of the current slider content

    For each element in li, you can set the following options to achieve various effects.
    Animation style, class attribute: The class attribute value represents different animation styles: sft - Short from Top, sfb - Short from Bottom, sfr - Short from Right, sfl - Short from Left, lft - Long from Top, lfb - Long from Bottom, lfr - Long from Right, lfl - Long from Left, fade - fading
    data-x: horizontal displacement of the current element relative to li
    data-y: the vertical displacement of the current element relative to li
    data-speed: animation time, milliseconds
    data-start after: Wait a few seconds before the current element is displayed
    data-easing: buffer animation, including easeOutBack... various animation effects, please refer to jQuery Easing Animation Effect Extension

    In addition, if you want to add the timeline as a timer, you can add the following code at the end of the sliding content:

     
    <div class="tp-bannertimer"></div> 
    Copy after login

    The above is the entire content of this article, I hope you all like it.

  • Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!