焦点播放效果 aminmate loading picture

2011-04-01 17:30:58 by 【6yang】, 219 visits, 收藏 | 返回

Demo链接:

http://www.6yang.net/myjavascriptlib/focusPic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aminmate loading picture</title>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
body{
   font:14px/1.5 Verdana, Geneva, sans-serif;
   margin:0;
   padding:0;
   text-align:center;
}
a{
   color:#333;
   text-decoration:none;
}
a:hover{
   text-decoration:underline;
}
ul,li{
   list-style:none;
   text-align:left;
   padding:0;
   margin:0;
}
#focusPic,
#focusPic1{
   background-color:#000;
   margin:5px auto;
   height:150px;
   width:250px;
   overflow:hidden;
}
#focusPic img,
#focusPic1 img{
   border:0;
   max-width:250px;
   max-height:150px;
}
.focusPic{
   border:5px solid #333;
   position:relative;
}
.focusPic .pic{
   position:absolute;
   display:none;
}
.focusPic .pic .thumb{
   position:absolute;
}

.focusPic .pic.current{
   display:block;
}

.focusPic .thumbList{
   position:absolute;
   left:0;
   bottom:0px;
   z-index:10;
}
.focusPic .thumbList{
   margin:0 auto;
   overflow:hidden;
   padding:0 0 0 2px;
}
.focusPic .thumbList li{
   float:left;
   padding:0 1px;
}
.focusPic .thumbList li .itemThumb a{
   font-size:0;
   display:block;
   border:1px solid #333;
   display:block;
   height:46px;
   width:78px;
   filter:alpha(opacity=40);
   opacity:0.4;
   overflow:hidden;
}
.focusPic .thumbList li .itemThumb a.current{
   border:1px solid #F60;
   filter:alpha(opacity=100);
   opacity:1;
}
.focusPic .thumbList li .itemThumb img{
   border:0;
   max-width:78px;
   max-height:46px;
}

.loading,
.focusPic .loadingOut{
   height:150px;
   width:250px;
   background-color:#000;
   background-image:url(images/loading.gif);
   background-position:50% 50%;
   background-repeat:no-repeat;
}
.focusPic .loadingOut{
   position:absolute;
   left:0;
   top:0;
   z-index:101;
}
</style>
<script type="text/javascript" language="JavaScript">
(function($){
   //show panels in center
   $.fn.showParentPanelCenter = function(){
        this.each(function(){
            var coorX = ($(this).parent().width() - $(this).width())/2;
            var coorY = ($(this).parent().height() - $(this).height())/2;
            $(this).showPanelPosition(coorX, coorY);
        });

        return this;
   };

   //show panels in position
   $.fn.showPanelPosition = function(x, y){
        this.each(function(){
            $(this)
                .css({
                    "left": x,
                    "top": y
                });

        });

        return this;
   };

   //pre loading each item img
   $.fn.getImage = function(arrUrl, fn){
        this.each(function(i){
            if(!arrUrl[i]){
                arrUrl[i] = this.src;
            }
            var img = new Image();
            img.src = arrUrl[i];
            if (img.complete){
                $(this).hasClass('loading') ? $(this).removeClass('loading') : '';
                fn.call(img);
            }
            else{
                $(this).addClass('loading');
                img.onload = function(){
                    fn.call(img);
                    this.onload = null;
                }
            }
        });

        return this;
   };
   /**
   * define public loading pic
   * @param arr, settings
   * @return void
   */
   $.fn.loadingPic = function(obj){

        this.each(function(){
            var self = $(this),
                timerSlide,
                iCurrent = 0,
                lenSlide = 0,
                arrTab = $('.itemThumb', self);

            if(arrTab.length == 0 || obj.length == 0){
                return;
            }
            self.hover(function(){
                window.clearInterval(timerSlide);
            }, function(){
                slideNext();
            });

            init();



            function slideTo(i){
                if(i==iCurrent){
                    return;
                }

                obj.stop(true,true);

                window.clearInterval(timerSlide);


                self.queue(function(){

                    obj.getImage([$('img', obj.eq(iCurrent)).attr('src')], function(){
                                });
                    obj.getImage([$('img', obj.eq(i)).attr('src')], function(){
                                });

                    $('.itemThumb', self).children('a').eq(iCurrent).removeClass("current");
                    $('.itemThumb', self).children('a').eq(i).addClass("current");

                    obj.eq(iCurrent).showParentPanelCenter().fadeOut();
                    obj.eq(i).showParentPanelCenter().fadeIn();

                    $(this).dequeue();
                });

                self.queue(function(){
                    iCurrent = i;
                    timerSlide = window.setInterval(slideNext ,2000);
                    $(this).dequeue();
                });


            }

            function slideNext(){
                var i = iCurrent + 1;
                if(i==lenSlide){
                    i = 0;
                }
                slideTo(i);
            }

            function init(){
                iCurrent = 0;
                lenSlide = obj.length;
                obj.eq(0).show();
                timerSlide = window.setInterval(slideNext ,2000);
                $('.itemThumb', self).hover(function(){
                    var j = arrTab.index(this);
                        slideTo(j);
                    },
                    function(){});
            }



        });

        return this;

   };
})(jQuery);

$(function(){


   //Ex 01
   var jQ_Slide = $('#focusPic'),
        arrImg = $('#focusPic img').attr('src');
   jQ_Slide.getImage([arrImg], function(){
        $('.loadingOut', jQ_Slide).remove();
   });

   jQ_Slide.loadingPic(jQ_Slide.children(".pic"));


   //Ex 02
   var jQ_Slide1 = $('#focusPic1'),
        arrImg01 = $('#focusPic1 img').attr('src');
   jQ_Slide1.getImage([arrImg01], function(){
        $('.loadingOut', jQ_Slide1).remove();
   });

   jQ_Slide1.loadingPic(jQ_Slide1.children(".pic"));



});
</script>
</head>

<body>

<h1>Focus picture play</h1>

<div class="focusPic" id="focusPic">
   <div class="loadingOut"></div>
   <div class="pic"><img src="http://img1.cache.netease.com/cnews/2011/3/31/2011033116433663677.jpg"></div>
   <div class="pic"><img src="http://img2.cache.netease.com/cnews/2011/3/26/2011032614100070af4.jpg"></div>
   <div class="pic"><img src="http://img1.cache.netease.com/cnews/2011/3/25/20110325152751264c3.jpg"></div>
   <div class="thumbList">
        <ul>
            <li>
                <div class="itemThumb">
                    <a href="#~" class="current"><img src="http://img1.cache.netease.com/cnews/2011/3/31/2011033116433663677.jpg" alt="" /></a>
                </div>
            </li>
            <li>
                <div class="itemThumb">
                    <a href="#~"><img src="http://img2.cache.netease.com/cnews/2011/3/26/2011032614100070af4.jpg" alt="" /></a>
                </div>
            </li>
            <li>
                <div class="itemThumb">
                    <a href="#~"><img src="http://img1.cache.netease.com/cnews/2011/3/25/20110325152751264c3.jpg" alt="" /></a>
                </div>
            </li>
        </ul>
   </div>
</div>
<div class="focusPic" id="focusPic1">
   <div class="loadingOut"></div>
   <div class="pic"><img src="images/t4.jpg"></div>
   <div class="pic"><img src="images/t8.jpg"></div>
   <div class="pic"><img src="images/t6.jpg"></div>
   <div class="thumbList">
        <ul>
            <li>
                <div class="itemThumb">
                    <a href="#~" class="current"><img src="images/t4.jpg" alt="" /></a>
                </div>
            </li>
            <li>
                <div class="itemThumb">
                    <a href="#~"><img src="images/t8.jpg" alt="" /></a>
                </div>
            </li>
            <li>
                <div class="itemThumb">
                    <a href="#~"><img src="images/t6.jpg" alt="" /></a>
                </div>
            </li>
        </ul>
   </div>
</div>
</body>
</html>

If you copy it, pls add Copyright @6yang.net ,thank you.

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=912&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

焦点播放效果 aminmate loading picture

http://www.6yang.net/myjavascriptlib/focusPic

图片原图