suchen

Heim >Web-Frontend >js-Tutorial >jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery

jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:461303Durchsuche

Das Beispiel in diesem Artikel beschreibt den Jquery-Gleiteffekt für den linken und rechten Vollbildmodus mit mehreren Bildern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein Plug-In, das den Banner-Fokus-Bildwiedergabeeffekt basierend auf JQuery implementiert. Es hat ein sehr grafisches Gefühl und ein besseres visuelles Erlebnis für den Benutzer ist konkreter. Es handelt sich um einen sehr modischen und großzügigen Spezialeffektcode.
运行效果图:                                       ------------- --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Der für Sie freigegebene jquery-Code für den linken und rechten Vollbild-Mehrbild-Schiebeeffekt im Vollbildmodus lautet wie folgt jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery



Das Obige ist der mit Ihnen geteilte JQuery-Code für den linken und rechten Vollbild-Mehrfachbild-Schiebeeffekt. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery商城网站全屏多张图片滑动切换代码</title>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
</head>
<body>

<!-- 代码部分begin -->
<div class="slides">
 <div class="slideInner">
 <a href="#" style="background: url(images/slide1.jpg) no-repeat;">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 </a>
 <a href="#" style="background: url(images/slide2.jpg) no-repeat">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide2p1.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 </a>
 <a href="#" class="slide3" style="background: url(images/slide3.jpg) no-repeat;">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide3p1.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide3p2.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 <div class="moveElem img3" rel="300,easeInOutExpo"> <img  src="images/slide3p3.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 </a>
 <a href="#" style="background: rgb(113, 209, 231);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 </a>
 <a href="#" style="background: rgb(178, 44, 44);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery links und rechts im Vollbildmodus, großer Multi-Bild-Gleiteffektcode, Sharing_jquery" > </div>
 </a>
 </div>
 <div class="nav">
 <a class="prev" href="javascript:;"></a>
 <a class="next" href="javascript:;"></a>
 </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/slide.js"></script>
<script >
$(document).ready(function() {
 $(".slideInner").slide({
 slideContainer: $('.slideInner a'),
 effect: 'easeOutCirc',
 autoRunTime: 5000,
 slideSpeed: 1000,
 nav: true,
 autoRun: true,
 prevBtn: $('a.prev'),
 nextBtn: $('a.next')
 })
})
</script>
<!-- 代码部分end -->

</body>
</html>
Stellungnahme：
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
Vorheriger Artikel：Durch jquery_jquery implementierter Code-Sharing für Benutzerregistrierungsformular-EingabeaufforderungNächster Artikel：Durch jquery_jquery implementierter Code-Sharing für Benutzerregistrierungsformular-Eingabeaufforderung

In Verbindung stehende Artikel

Mehr sehen