jQuery implémente l'effet de carrousel de diapositives rotatif (avec code)-js tutoriel-php.cn

jQuery implémente l'effet de carrousel de diapositives rotatif (avec code)

php中世界最好的语言

Libérer： 2018-04-24 10:16:50

original

2345 Les gens l'ont consulté

Cette fois, je vais vous présenter jQuery pour implémenter l'effet carrousel de diapositives rotatives (avec code). Quelles sont les précautions pour que jQuery implémente l'effet de carrousel de diapositives rotatives. Ce qui suit est un cas pratique, voyons. jetez un oeil une fois.

Caractéristiques

Réactif - s'adapte à la largeur de n'importe quelle fenêtre
Contenu mixte
Aucun CSS requis
Léger (< 8 Ko non compressé)
Construit basé sur jQuery
Préchargement d'images intégré
Fonction de rappel— —onConstruct onStart , onEnd
Plusieurs options configurables
Chargement paresseux des images
Rotation automatique
Facile à développer

Exemple de jquery : méthode d'utilisation d'anoSlide

Introduire les fichiers principaux

<script src="js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script></p>
<p style="text-align: left;">Écrire des styles CSS de base, entièrement personnalisables selon le projet</p>
<pre class="brush:php;toolbar:false">.carousel {
  position: relative;
  min-height: 20px;
  height: auto !important;
  height: 20px;
  background: url(images/loader.gif) center center no-repeat;
}
.carousel .next, .carousel .prev {
  display: none;
  width: 56px;
  height: 56px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-top: -28px;
  z-index: 9999;
  cursor: pointer;
}
.carousel .prev {
  margin-left: -60px;
  background: url(images/prev.png) 0 0 no-repeat;
}
.carousel .next {
  margin-right: -60px;
  background: url(images/next.png) 0 0 no-repeat;
}
.carousel li {
  display: none;
}
.carousel li img {
  width: 100%;
  height: auto;
}
.paging {
  position: absolute;
  z-index: 9998;
}
.paging > a {
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  float: left;
  background: url(images/dots.png) 0px -40px no-repeat;
}
.paging > a:hover, .paging > a.current {
  background: url(images/dots.png) 0px 0px no-repeat;
}
.badge {
  display: block;
  width: 104px;
  height: 104px;
  background: url(images/badge.png) 0 0 no-repeat;
  z-index: 9000;
  position: absolute;
  top: -3px;
  left: -3px;
}
img {
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none;   /* Firefox all */
  -ms-user-select: none;   /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}

Copier après la connexion

jquery carrousel anoSlide affichage mixte

$('.carousel ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev',
  next: 'a.next',
  lazy: true,
  auto: 4000
})
html
<p class="carousel">
  <a class="prev"></a>
  <ul>
    <li>Content goes here</li>
    <li>Content goes here</li>
    <li>Content goes here</li>
  </ul>
  <a class="next"></a>
</p>

Copier après la connexion

jquery slide anoSlide multi-images

$('.carousel[data-mixed] ul').anoSlide(
{
  items: 5,
  speed: 500,
  prev: 'a.prev[data-prev]',
  next: 'a.next[data-next]',
  lazy: true,
  delay: 100})

Copier après la connexion

HTML

<p class="carousel" data-mixed=""> <a class="prev" data-prev=""></a>
 <ul>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure>
   </p>
  </li>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure>
   </p>
  </li>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure>
   </p>
  </li>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure>
   </p>
  </li>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure>
   </p>
  </li>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure>
   </p>
  </li>
  <li>
   <p class="wrap">
    <figure><img src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure>
   </p>
  </li>
 </ul>
 <a class="next" data-next=""></a> </p>

Copier après la connexion

pagination anoSlide du carrousel jquery

$('.carousel ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev[data-prev-paging]',
  next: 'a.next[data-next-paging]',
  lazy: true,
  onConstruct: function(instance)
  {
    var paging = $('<p/>').addClass('paging fix').css(
    {
      position: 'absolute',
      top: 1,
      left:50 + '%',
      width: instance.slides.length * 40,
      marginLeft: -(instance.slides.length * 40)/2
    })
     
    /* Build paging */
    for (i = 0, l = instance.slides.length; i < l; i++)
    {
      var a = $(&#39;<a/>').data('index', i).appendTo(paging).on(
      {
        click: function()
        {
          instance.stop().go($(this).data('index'));
        }
      });
       
      if (i == instance.current)
      {
        a.addClass('current');
      }
    }
 
    instance.element.parent().append(paging);
  },
  onStart: function(ui)
  {
    var paging = $('.paging');
     
    paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
  }
})

Copier après la connexion

html

<p class="carousel">
  <a class="prev"></a>
  <ul>
    <li>Content goes here</li>
    <li>Content goes here</li>
    <li>Content goes here</li>
  </ul>
  <a class="next"></a>
</p>

Copier après la connexion

jquery slide anoSlide title

$('.carousel.captions ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev[data-prev-caption]',
  next: 'a.next[data-next-caption]',
  lazy: true,
  onStart: function(ui)
  {
    /* Remove existing caption in slide */
    ui.slide.element.find('.caption').remove();
  },
  onEnd: function(ui)
  {
    /* Get caption content */
    var content = ui.slide.element.data('caption');
     
    /* Create a caption wrap element */
    var caption = $('<p/>').addClass('caption').css(
    {
      position: 'absolute', 
      background: 'rgb(0,0,0)',
      color: 'rgb(255,255,255)',
      textShadow: 'rgb(0,0,0) -1px -1px',
      opacity: 0.5,
      top: -100,
      left: 50,
      padding: 20,
      webkitBorderRadius: 5,
      mozBorderRadius: 5,
      borderRadius: 5
    }).html(content);
     
    /* Append caption to slide and animate it. Animation is really up to you. */
    caption.appendTo(ui.slide.element).animate(
    {
      top:50
    });
  }
})

Copier après la connexion

html

<p class="carousel captions">
  <a class="prev" data-prev-caption></a>
  <ul>
    <li data-caption="Adding captions is really easy">
      <figure><img src="images/slides/1.jpg" src="" /></figure>
    </li>
    <li data-caption="anoSlide&#39;s callback functions can be used for adding Captions">
      <figure><img src="images/slides/2.jpg" src="" /></figure>
    </li>
    <li data-caption="<span style=&#39;color:#00f0ff&#39;>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">
      <figure><img src="images/slides/3.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img src="images/slides/4.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img src="images/slides/5.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img src="images/slides/6.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img src="images/slides/7.jpg" src="" /></figure>
    </li>
  </ul>
  <a class="next" data-next-caption></a>
  <a class="badge"></a>
</p>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le. php site chinois !

Lecture recommandée :

jQuery+PHP implémente la méthode d'édition des tables et de leur sauvegarde

Explication détaillée des étapes de mise en œuvre locale tri des tables avec jQuery (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!