Heim  >  Artikel  >  Web-Frontend  >  jquery 简单的banner轮播实例

jquery 简单的banner轮播实例

WBOY
WBOYOriginal
2016-06-01 09:54:571385Durchsuche
<code class="language-html">

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


    <div class="imgbox">
            <ul id="banner_img">
                <li><img  src="images/banner1.jpg" alt="jquery 简单的banner轮播实例" ></li>
                <li><img  src="images/banner2.jpg" alt="jquery 简单的banner轮播实例" ></li>
                <li><img  src="images/banner3.jpg" alt="jquery 简单的banner轮播实例" ></li>
                <li><img  src="images/banner4.jpg" alt="jquery 简单的banner轮播实例" ></li>
                <li><img  src="images/banner5.jpg" alt="jquery 简单的banner轮播实例" ></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 ? 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 ? 1 : index + 1;
             time = setTimeout("showimg(" + index + ")", 3000);
         }
    </script>

</code>

注意要引用 Jquery 文件,图片我就不放上来了,自己替换掉,注意图片长宽。

效果图如下:

jquery 简单的banner轮播实例

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn