jquery melaksanakan kesan karusel sepanduk mudah [contoh]

jquery melaksanakan kesan karusel sepanduk mudah [contoh]_jquery

WBOY

Lepaskan： 2016-05-16 15:07:16

asal

1279 orang telah melayarinya

Seorang rakan menunjukkan kepada saya kesan karusel. Saya telah memuat turun js dan melihat kesan mudah seperti Yaya boleh ditulis dalam beratus-ratus baris Ia menjejaskan kelajuan pemuatan penyemak imbas Trafik adalah percuma untuk dimainkan. . Dalam keadaan terdesak, saya menulis yang mudah untuknya Semua kod tidak melebihi 70 baris, dan terdapat juga CSS dengan sudut bulat Tidak setiap pelayar mempunyai sudut bulat, tetapi ia tidak menjejaskan penampilan, 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>

Salin selepas log masuk

Pastikan anda memetik fail Jquery saya tidak akan memuat naik imej tersebut. Anda boleh menggantikannya sendiri.

Rendering adalah seperti berikut:

Pelaksanaan jquery bagi kesan karusel sepanduk yang ringkas [contoh] ialah semua kandungan yang dikongsi oleh editor, saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.