Heim > Web-Frontend > js-Tutorial > js, um Index-Image-Switching-Effekt_Javascript-Fähigkeiten zu erlangen

js, um Index-Image-Switching-Effekt_Javascript-Fähigkeiten zu erlangen

WBOY
Freigeben: 2016-05-16 15:30:45
Original
1614 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den JS-Code, der den Indexbild-Umschalteffekt implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt

HTML-Code:

<div id="slideshowHolder">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    </div>
Nach dem Login kopieren

CSS-Code:

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

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
      });
    });
Nach dem Login kopieren

Das Obige ist der Hauptcode von js, um den Indexbildwechseleffekt zu erzielen. Ich hoffe, dass jeder den Bildwechseleffekt implementieren kann.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage