jquery 轮询图片

来源:互联网 发布:荷塘月色淘宝 编辑:程序博客网 时间:2024/05/17 02:54
JS部分:

     $(function(){
      pictureCycle();
      }

    //首页轮换图片    
        var n = 0, count;
        function pictureCycle() {
        count = $("#flashmf a").length;
        $("#flashmf a:not(:first-child)").hide();
        $("ul.flash_bar li").click(function(){
            var i = $("ul.flash_bar li").index(this);
            n = i;
            if (i >= count)
            {
            return;
            }
            $("#flashmf a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(500);
            document.getElementById("flashmf").style.background = '';
            $(this).toggleClass("toggle");
            $(this).siblings().removeClass("toggle");
        });
        var t = setInterval("showAuto()", 4000);
        $("ul.flash_bar li").hover(function () {
            var _index = $("ul.flash_bar li").index(this);
            $("ul.flash_bar li").eq(_index).trigger('click');
            clearInterval(t);
        }, function () { t = setInterval("showAuto()", 4000); });
        }
        function showAuto() {
            n = n >= (count - 1) ? 0 : ++n;
            $("ul.flash_bar li").eq(n).trigger('click');
        }


HTML部分:
    <div id="flashmf">
        <a href="javascript:void(0)" style="cursor: default; display: block;">
            <img alt="" title="" src="http://115.28.37.182:8080/yuda-web/findImg.htm?imgPath=/opt/yuda_img/lunbo01.jpg">
        </a>
        <a href="javascript:void(0)" style="cursor: default; display: none;">
            <img alt="" title="" src="http://115.28.37.182:8080/yuda-web/findImg.htm?imgPath=/opt/yuda_img/lunbo02.jpg">
        </a>
        <a href="javascript:void(0)" style="cursor: default; display: none;">
            <img alt="" title="" src="http://115.28.37.182:8080/yuda-web/findImg.htm?imgPath=/opt/yuda_img/lunbo03.jpg">
        </a>

        <ul class="flash_bar fdRight">
            <li class="toggle"></li>
            <li class=""></li>
            <li class=""></li>
        </ul>
    </div>

CSS部分:
    <style type="text/css">
    #flashmf{ width:803px;height:198px;margin-bottom:12px;}
    #flashmf a{ width:803px;height:198px;position:absolute;}
    ul.flash_bar {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8;z-index:1;bottom:3330px; right:230px;}
    ul.flash_bar li{float:left;width:10px;display:block;height:16px;margin-right:5px;margin-top:175px;cursor:pointer;background:url("../../images/whiteRain.png") no-repeat;}
    ul.flash_bar li.toggle{ float:left;width:10px; height:16px;margin-right:5px;margin-top:175px;cursor:pointer;background:url("../../images/yellowRain.png") no-repeat;}
    </style>


说明:

filter(":visible") :获取所有可见的元素

unbind():从匹配的元素中删除绑定的事件

siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

trigger:在每一个匹配的元素上触发某类事件。
原创粉丝点击