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

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

WBOY

Libérer： 2016-05-16 15:07:16

original

1282 Les gens l'ont consulté

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>

Copier après la connexion

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.