Maison > interface Web > js tutoriel > le corps du texte

Carrousel d'images de contrôle de survol JQuery - simple code_jquery

WBOY
Libérer: 2016-05-16 15:46:49
original
1688 Les gens l'ont consulté

L'effet carrousel automatique des images survolées par la souris implémenté par jquery Lorsque la souris passe sur l'image, l'image continuera à jouer en boucle. La vitesse est très rapide et l'effet est très réaliste. comme jouer un film d'arts martiaux, en utilisant l'implémentation jquery, l'éditeur ci-dessous analysera le carrousel d'images de contrôle de survol jq, veuillez voir les rendus sur le côté.

Aperçu en ligne   Téléchargement du code source


Le code d'implémentation spécifique est le suivant :

<!-- 轮播广告 -->
 <div id="banner_tabs" class="flexslider">
 <ul class="slides">
  <li>
  <a title="" target="_blank" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
  <li>
  <a title="" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
  <li>
  <a title="" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
 </ul>
 <ul class="flex-direction-nav">
  <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  <li><a class="flex-next" href="javascript:;">Next</a></li>
 </ul>
 <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  <li><a>1</a></li>
  <li><a>2</a></li>
  <li><a>2</a></li>
 </ol>
 </div>
 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/slider.js"></script>
 <script type="text/javascript">
 $(function () {
  var bannerSlider = new Slider($('#banner_tabs'), {
  time: 5000,
  delay: 400,
  event: 'hover',
  auto: true,
  mode: 'fade',
  controller: $('#bannerCtrl'),
  activeControllerCls: 'active'
  });
  $('#banner_tabs .flex-prev').click(function () {
  bannerSlider.prev()
  });
  $('#banner_tabs .flex-next').click(function () {
  bannerSlider.next()
  });
 })
 </script>
Copier après la connexion

code css :

.flexslider {
  margin: 0px auto 20px;
  position: relative;
  width: 100%;
  height: 482px;
  overflow: hidden;
  zoom: 1;
 }
  .flexslider .slides li {
  width: 100%;
  height: 100%;
  }
 .flex-direction-nav a {
  width: 70px;
  height: 70px;
  line-height: 99em;
  overflow: hidden;
  margin: -35px 0 0;
  display: block;
  background: url(images/ad_ctr.png) no-repeat;
  position: absolute;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .3s ease;
  border-radius: 35px;
 }
 .flex-direction-nav .flex-next {
  background-position: 0 -70px;
  right: 0;
 }
 .flex-direction-nav .flex-prev {
  left: 0;
 }
 .flexslider:hover .flex-next {
  opacity: 0.8;
  filter: alpha(opacity=25);
 }
 .flexslider:hover .flex-prev {
  opacity: 0.8;
  filter: alpha(opacity=25);
 }
  .flexslider:hover .flex-next:hover,
  .flexslider:hover .flex-prev:hover {
  opacity: 1;
  filter: alpha(opacity=50);
  }
 .flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
 }
  .flex-control-nav li {
  margin: 0 2px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  }
 .flex-control-paging li a {
  background: url(images/dot.png) no-repeat 0 -16px;
  display: block;
  height: 16px;
  overflow: hidden;
  text-indent: -99em;
  width: 16px;
  cursor: pointer;
 }
  .flex-control-paging li a.flex-active,
  .flex-control-paging li.active a {
  background-position: 0 0;
  }
 .flexslider .slides a img {
  width: 100%;
  height: 482px;
  display: block;
 }
Copier après la connexion

Le code ci-dessus est le contenu de cet article utilisant jq pour implémenter un carrousel d'images de contrôle de survol. J'espère qu'il vous plaira.

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal