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

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;
}

jquery carrousel anoSlide affichage mixte

JS

$('.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>

jquery slide anoSlide multi-images

JS

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

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>

pagination anoSlide du carrousel jquery

js

$('.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');
  }
})

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>

jquery slide anoSlide title

js

$('.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
    });
  }
})

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>

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!