jquery 首页轮播插件 icarouselbox.js

// 首页轮播(icarouselbox)
//需jquery支持
// powered by 傅攀
// email 1037537109@qq.com
// 完成日期：2015-11-24
// 说明：
//         <div class="carouselbox" sizeInf="500 350 50 50 100" style="display:none;">
//         <!--sizeInf 中央窗口宽、高、上下相对偏移、按钮宽、高 不显示，由jq负责 防止浏览器不支持jq 该div需设置高度 不设置则不占位置-->
//         <!--该标签class名必须为 carouselbox-->
//         <img src="night.jpg" alt="1" title="1" class="pic" link="#"/>
//         <img src="t1.jpg" alt="2" title="2" class="pic" link="#"/>
//         <img src="t2.jpg" alt="3" title="3" class="pic" link="#"/>
//         <img src="t3.jpg" alt="4" title="4" class="pic" link="#"/>
//         <img src="t4.jpg" alt="3" title="3" class="pic" link="#"/>
//         <img src="t5.jpg" alt="4" title="4" class="pic" link="#"/>
//         <!--img 为轮播图片 link为额外属性 单击后新标签跳转链接-->
            
//     </div>


$(function(){
    
        //当窗口大小改变，重新布局
         $(window).resize(function(){

             changelayout(img_width,img_height);
         });


        
        //完成对象获取及元素追加
         var $container=$(".carouselbox");
         $container.show();
         var timer=$container.attr("timer");
         var $imgs=$container.find("img").remove();
         var $imgs_copy=$imgs.clone();

         $imgs.css({
             "position":"absolute"
         });

         $imgs_copy.css({
             "cursor":"pointer"
         }).click(function(){
             window.open($(this).attr("link"));
         });

         var $carousel=$("<div class='carousel'></div>").append($imgs);
         var $carousel_wrap=$("<div class='carousel_wrap'></div>").append($carousel);

         var $imageRoll=$("<div class='imageRoll'></div>").append($imgs_copy);
         var $imageRoll_wrap=$("<div class='imageRoll_wrap'></div>").append($imageRoll);

         

         var $next=$("<div class='next'>></div>");
         var $pre=$("<div class='pre'><</div>");
         var $page_control=$("<div class='page_control'></div>");
         $container.append($carousel_wrap).append($imageRoll_wrap).append($next).append($pre);
         $imageRoll_wrap.append($page_control);
        
         appendPCB($imgs.size());

         
         //修改布局
         $carousel_wrap.css({
            "width":"100%",
            "overflow":"hidden",
            "position":"absolute",
            "-moz-filter": "blur(5px)",
            "-webkit-filter": "blur(5px)",
            "-o-filter": "blur(5px)",
            "-ms-filter": "blur(5px)",
            "filter": "blur(5px)"
        });

        //图片装载完毕后显示
        $imgs_copy.load(function(){
            showImg(0);
        });

        //绑定事件
        $imageRoll_wrap.mouseover(function(){
             if(adTimer){
                 
                clearInterval(adTimer);


            }
        }).mouseout(function(){
                    adTimer=setInterval(function(){
                    index=$imgs_copy.index($imgs_copy.filter(":visible"));

                    index++;
                    if(index==$imgs_copy.size()){index=0;}
                    showImg(index);
                    
                },parseInt(timer));
        }).trigger("mouseleave");




    
        $pre.click(function(){
            var ind =$imgs_copy.index($imgs_copy.filter(":visible"));
            
            if(ind==0){ind=$imgs_copy.size();}
            ind--;
            showImg(ind);
            $(this).css({
                "background":"rgba(167,167,167,0.6)"
            });

        }).mouseover(function(){
            $(this).css({
                "background":"rgba(167,167,167,0.6)"
            });
            $imageRoll_wrap.trigger("mouseover");
        }).mouseout(function(){
            $(this).css({
                "background":"rgba(255,255,255,0.2)"
            });
            $imageRoll_wrap.trigger("mouseout");
            
        });

        $next.click(function(){

            var ind =$imgs_copy.index($imgs_copy.filter(":visible"));
            ind++;
            if(ind==$imgs_copy.size()){ind=0;}
            showImg(ind);
            $(this).css({
                "background":"rgba(167,167,167,0.6)"
            });

        }).mouseover(function(){

            $(this).css({
                "background":"rgba(167,167,167,0.6)"
            });
            $imageRoll_wrap.trigger("mouseover");
        }).mouseout(function(){
            $(this).css({
                "background":"rgba(255,255,255,0.2)"
            });
            $imageRoll_wrap.trigger("mouseout");
        });
        
    //追加页面控制按钮及事件绑定
    function appendPCB(n)
    {
        index=0;
        for(var i=0;i<n;i++)
        {
            $page_control.append($("<div class='PCB'></div>"));

        }
        $PCB=$(".PCB");
        $PCB.css({
            "width":"15px",
            "height":"15px",
            "background":"rgba(108,241,44,0.5)",
            "display":"inline-block",
            "margin":"2px",
            "cursor":"pointer",
            "border":"1px solid #72EC68",
            "box-shadow":"1px 1px 4px #fff"
        });
         $page_control.css({
             "position":"absolute",
             "bottom":"20px",
             "right":"20px"
             
         });

         $PCB.mouseover(function(){

             $(this).css({
                 "background":"#97F331"
             }).siblings().css({
                 "background":"rgba(108,241,44,0.5)"
             });
    
             showImg($PCB.index(this));

         });
    }

    //刷新当前img_width\height的值
    function getImgSize(index)
    {
         img_width=$imgs.eq(index).width();

         img_height=$imgs.eq(index).height();
    }

    function showImg(index)
    {
        getImgSize(index);
        changelayout(img_width,img_height);

        $imgs_copy.eq(index).stop(true,true).show().siblings().hide();
        $imgs.eq(index).stop(true,true).show().siblings().hide();
        $PCB.eq(index).css({"background":"#97F331"}).siblings().css({"background":"rgba(108,241,44,0.5)"});
    }

    function changelayout(img_width,img_height)
    {
        
        var inf=$container.attr("sizeInf").split(' ');

        var iWidth=parseInt(inf[0]);
        var iHeight=parseInt(inf[1]);
        var cHeight=parseInt(inf[1]);
        var iTop=parseInt(inf[2]);
        var btnWidth=parseInt(inf[3]);
        var btnHeight=parseInt(inf[4]);


         var carousel_width=$carousel.width();

         var carousel_height=$carousel.height((cHeight+iTop)+"px").height();

         var carousel_wrap_height=$carousel_wrap.height(cHeight+"px").height();

         var img_left=(carousel_width - img_width)/2;
         var img_top=(carousel_height - img_height)/2;

         var imageRoll_wrap_width=$imageRoll_wrap.width(iWidth+"px").width();
         var imageRoll_wrap_height=$imageRoll_wrap.height(iHeight+"px").height();

         var imageRoll_wrap_left=(carousel_width- imageRoll_wrap_width)/2;
         



         $imgs.css({
             "position":"absolute",
             "left":img_left+"px",
             "top":img_top+"px"
         });

         $imageRoll_wrap.css({
             "position":"absolute",
             "overflow":"hidden",
             "top":iTop+"px",
             "left":imageRoll_wrap_left+"px",
             "box-shadow":"2px 1px 4px #000"

         });

        
        var imageRoll_left=imageRoll_wrap_left- img_left;
        var imageRoll_top=img_top - iTop;
        
        var next_left=imageRoll_wrap_left+iWidth-btnWidth/2;
        var next_top=iTop+(imageRoll_wrap_height-btnHeight)/2;
        var pre_left=imageRoll_wrap_left-btnWidth/2;
        var pre_top=next_top;

         $imageRoll.css({
             "position":"absolute",
             "left":"-"+imageRoll_left+"px",
             "top":imageRoll_top+"px"

         });

         $next.css({

             "line-height":btnHeight+"px",
             "width":btnWidth+"px",
             "height":btnHeight+"px",
             "left":next_left+"px",
             "top":next_top+"px"

         });
         $pre.css({

             "line-height":btnHeight+"px",
             "width":btnWidth+"px",
             "height":btnHeight+"px",
             "left":pre_left+"px",
             "top":pre_top+"px"

         });


    }

         $next.css({
             "background":"rgba(255,255,255,0.2)",
             "cursor":"pointer",
             "position":"absolute",
             "font-weight":"bold",
             "font-size":"20px",
             "text-align":"center",
             "color":"#F0F8F9",
             "box-shadow":"2px 1px 4px #000",
             "-moz-transition":"background 0.2s linear",
             "-o-transition":"background 0.2s linear",
              "-webkit-transition":"background 0.2s linear"
         });

         $pre.css({
             "background":"rgba(255,255,255,0.2)",
             "cursor":"pointer",
             "position":"absolute",
             "font-weight":"bold",
             "font-size":"20px",
             "text-align":"center",
             "color":"#F0F8F9",
             "box-shadow":"2px 1px 4px #000",
             "-moz-transition":"background 0.2s linear",
             "-o-transition":"background 0.2s linear",
              "-webkit-transition":"background 0.2s linear"
         });

})