Maison >interface Web >js tutoriel >jquery gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery

jquery gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery

WBOYoriginal: 2016-05-16 15:41:461312parcourir

L'exemple de cet article décrit l'effet de glissement multi-images de grande taille en plein écran gauche et droit de jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un plug-in qui implémente l'effet de lecture d'image de mise au point de bannière basé sur jquery. Lorsque l'image est lue, elle remplit l'écran. L'effet de présentation est meilleur et plus substantiel, et l'expérience visuelle de l'utilisateur est améliorée. C'est plus concret. C'est un code d'effets spéciaux très à la mode et généreux.
运行效果图： -------------------查看效果下载源码----------- ---------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet coulissant multi-images de grande taille en plein écran gauche et droit jquery partagé avec vous est le suivant

<!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 gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery gauche et droite plein écran grande taille multi-image effet coulissant code 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 gauche et droite plein écran grande taille multi-image effet coulissant code 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 gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide3p2.png" / alt="jquery gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery" > </div>
 <div class="moveElem img3" rel="300,easeInOutExpo"> <img  src="images/slide3p3.png" / alt="jquery gauche et droite plein écran grande taille multi-image effet coulissant code 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 gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery gauche et droite plein écran grande taille multi-image effet coulissant code 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 gauche et droite plein écran grande taille multi-image effet coulissant code Sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery gauche et droite plein écran grande taille multi-image effet coulissant code 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>

Ce qui précède est le code d'effet coulissant multi-images de grande taille en plein écran gauche et droit jquery partagé avec vous. J'espère que vous pourrez l'aimer.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Formulaire d'inscription de l'utilisateur, partage de code d'effet d'opération rapide implémenté par jquery_jqueryArticle suivant：Formulaire d'inscription de l'utilisateur, partage de code d'effet d'opération rapide implémenté par jquery_jquery

Articles Liés

Voir plus