recherche

Maison >interface Web >js tutoriel >jquery implémente un simple effet de carrousel de bannière [Exemple]_jquery

jquery implémente un simple effet de carrousel de bannière [Exemple]_jquery

WBOY
WBOYoriginal
2016-05-16 15:07:161318parcourir

Un ami m'a montré un effet carrousel. J'ai téléchargé le js et j'ai jeté un œil. Un effet aussi simple de Yaya peut être écrit en centaines de lignes. Cela affecte sérieusement la vitesse de chargement du navigateur. Le trafic est gratuit. . En désespoir de cause, j'en ai écrit un simple. Tous les codes ne dépassaient pas 70 lignes, et il y avait aussi le CSS avec des coins arrondis. Tous les navigateurs n'ont pas de coins arrondis, mais cela n'affecte pas l'apparence, hehe. 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>无标题页</title>
  <script src="js/jquery-2.1.4.js" type="text/javascript"></script>
  <style type="text/css">
    .clear{overflow:hidden; clear:both; width:0px; height:0px; }
    .imgbox{width:640px; margin:0 auto; text-align:center; }
    ul{padding:0px; margin:0px;}
    ul li{float:left; list-style:none; }
    ul li.select{display:block;}
    .imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px; background-color:#F90; cursor:pointer;}
    .imgnum span.onselect{background-color:#F00;}
    .imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}
  </style>
</head>
<body>
  <div class="imgbox">
      <ul id="banner_img">
        <li><img src="images/banner1.jpg"/></li>
        <li><img src="images/banner2.jpg"/></li>
        <li><img src="images/banner3.jpg"/></li>
        <li><img src="images/banner4.jpg"/></li>
        <li><img src="images/banner5.jpg"/></li>
      </ul>
  <div class="clear"></div>
  <div class="imgnum">
    <span class="onselect">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>
<script type="text/javascript">
     var time = "";
     var index = 1;
     $(function () {
       showimg(index);
       //鼠标移入移出
       $(".imgnum span").hover(function () {
        clearTimeout(time);
        var icon=$(this).text();
        $(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
        $("#banner_img li").hide().stop(true,true).eq(icon-1).fadeIn("slow");
       }, function () {
        index=$(this).text()> 4 &#63; 1 :parseInt($(this).text())+1;
        time = setTimeout("showimg(" + index + ")", 3000);
       });
     });
 
     function showimg(num) {
       index = num;
       $(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
       $("#banner_img li").hide().stop(true,true).eq(index-1).fadeIn("slow");
       index = index + 1 > 5 &#63; 1 : index + 1;
       time = setTimeout("showimg(" + index + ")", 3000);
     }
  </script>
</body>
</html>

Assurez-vous de citer le fichier Jquery. Je ne téléchargerai pas l'image. Vous pouvez le remplacer vous-même. Faites attention à la longueur et à la largeur de l'image.

Le rendu est le suivant :

L'implémentation jquery ci-dessus d'un simple effet de carrousel de bannière [exemple] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez Script Home.

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：JQuery implémente un simple effet d'interrogation du serveur example_jqueryArticle suivant：JQuery implémente un simple effet d'interrogation du serveur example_jquery

Articles Liés

Voir plus