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

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

WBOY

Libérer： 2016-05-16 15:41:46

original

1249 Les gens l'ont consulté

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.
运行效果图： -------------------查看效果下载源码----------- ---------

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

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>

Copier après la connexion

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.