Home  >  Article  >  Web Front-end  >  js to achieve index image switching effect_javascript skills

js to achieve index image switching effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:30:451584browse

The example in this article describes the js code that implements the index image switching effect. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows

html code:

<div id="slideshowHolder">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    </div>

css code:

.ft-prev, .ft-next {
      background-color: #000;
      padding: 0 10px;
      color:#fff;
    }

js code:

$(document).ready(function () {
      $('#slideshowHolder').jqFancyTransitions({
        effect: '', // wave, zipper, curtain
        width: 500, // width of panel
        height: 700, // height of panel
        strips: 20, // number of strips
        delay: 5000, // delay between images in ms
        stripDelay: 50, // delay beetwen strips in ms
        titleOpacity: 0.7, // opacity of title
        titleSpeed: 1000, // speed of title appereance in ms
        position: 'alternate', // top, bottom, alternate, curtain
        direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
        navigation: true, // prev and next navigation buttons
        links: true // show images as links
      });
    });

The above is the main code of js to achieve the index image switching effect. I hope everyone can implement the image switching effect.

Statement:
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