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

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

WBOY

Freigeben： 2016-05-16 15:41:46

Original

1250 Leute haben es durchsucht

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>

Nach dem Login kopieren