自定义插件实现网易云音乐首页图片轮播

最新推荐文章于 2024-07-29 16:47:25 发布

wahwahwinner

最新推荐文章于 2024-07-29 16:47:25 发布

阅读量6.6k

点赞数 4

分类专栏： jQuery 文章标签： html

本文链接：https://blog.csdn.net/wahwhh/article/details/53465192

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

编写html界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>网易云音乐首页图片轮播</title>
    </head>
    <body>
        <div class="J_poster main" >
            <div class="btn prv-btn"></div>
            <ul class="list">
                <li class="item"><a href="#"><img src="img/a.jpg" width="100%" height="100%" /></a></li>
                <li class="item"><a href="#"><img src="img/b.jpg" width="100%" height="100%" /></a></li>
                <li class="item"><a href="#"><img src="img/c.jpg" width="100%" height="100%" /></a></li>
                <li class="item"><a href="#"><img src="img/d.jpg"  width="100%" height="100%" /></a></li>
                <li class="item"><a href="#"><img src="img/f.jpg"  width="100%" height="100%" /></a></li>

            </ul>
            <div class="btn next-btn"></div>
        </div>
    </body>
</html>

2 编写界面CSS代码，并引入

//引入css
<link rel="stylesheet" href="css/style.css" />
*{
    margin: 0;
    padding: 0;
}
body{
    padding: 50px;
}
.main{
    position: relative;
    width: 800px;
    height: 270px;
}
.btn{
    width: 100px;
    height: 270px;
    position: absolute;
    top: 0;
    cursor: pointer;
    opacity: 0.8;
    z-index: 10;

}
.prv-btn{
    left: 0;
    background: url(../img/btn_l.png) no-repeat center center;
}
.next-btn{
    background: url(../img/btn_r.png) no-repeat center center;
    right: 0;
}
.main .list{
    list-style: none;
    width: 800px;
    height: 270px;
}
.main .list .item{
    position: absolute;
    left: 0;
    top: 0;
}
.main .item a ,.main .item img{
    display: block;
}

3.分析插件需要的属性

this.setting = {
                "width":1000,       //图片轮播的宽度
                "height":270,       //图片轮播的高度
                "posterWidth":640,  //图片轮播第一帧的宽度
                "posterHeight":270, //图片轮播第一帧的高度
                "scale":0.9,        //记录显示比例关系
                "speed":500,        //播放的速度  
                "autoPlay":false,   //是否自动播放
                "delay":500,        //自动播放的间隔  
                };

4.引入jQuery，搭建插件框架

//引入js
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
//搭建插件结构
;(function($){
var Carousel=function(poster){
};
Carousel.prototype={
};
Carousel.init=function(){
};
window["Carousel"]=Carousel;
})(jQuery);
//界面引用
<script >
        $(function(){
            Carousel.init($(".J_poster"));
        });
</script>

5.图片轮播的div设置默认配置

<div class="J_poster main" 
     data-setting='{
                   "width":800,         
                   "height":270,                
                   "posterWidth":640,   
                   "posterHeight":270,  
                   "scale":0.9,                 
                   "speed":500,
                   "autoPlay":false,
                  "delay":500,
                 }'>

        </div>

6.编写插件函数

Carousel.prototype=
         //自动播放
         autoPlay:function(){
            },
        //轮播函数
        carouseRotate:function(dir){    
            },
        //设置其它帧的位置
        setPosterpos:function(){
            },
        //设置轮播参数以及第一帧
        setSettingValue:function(){

        },
        //获取人工指定的setting值
        getSetting:function(){
        }
    };

7.插件的实现

;(function($){

var Carousel=function(poster){
                    var self=this;
                    //保存单个对象
                     this.poster=poster;
                     this.posterItemMain=poster.find('ul.list');
                     this.nextbtn=poster.find('div.next-btn');
                     this.prevbtn=poster.find('div.prv-btn');
                     this.posterItems=poster.find('li.item');
                     if(this.posterItems.size()%2==0){
        this.posterItemMain.append(this.posterItems.eq(0).clone());
                            this.posterItems =                      this.posterItemMain.children();
                        };
                     this.posterFirstItem=this.posterItems.first();
                     this.posterLastItem=this.posterItems.last();
                     this.rotateFlag   = true;
                    //默认配置参数
                    this.setting = {
                                    "width":1000,   
                                    "height":270,   
                                    "posterWidth":640,
                                    "posterHeight":270, 
                                    "scale":0.9,                    
                                    "speed":500,
                                    "autoPlay":false,
                                    "delay":500,
                                };
            $.extend(this.setting, this.getSetting());
            //设置参数
            this.setSettingValue();
            this.setPosterpos();
            //左旋
            this.nextbtn.click(function(){
                if(self.rotateFlag){
                    self.rotateFlag=false;
                    self.carouseRotate("left");
                };
            });
            //右旋
            this.prevbtn.click(function(){
                if(self.rotateFlag){
                    self.rotateFlag=false;
                    self.carouseRotate("right");
                }
            });
            //是否开启自动播放
           if(this.setting.autoPlay){
            this.autoPlay();
            this.poster.hover(function(){
                                        window.clearInterval(self.timer);
                                        },function(){
                                        self.autoPlay();
                                        });

        };

};
Carousel.prototype={
            autoPlay:function(){
                var self=this;
                this.timer=window.setInterval(function(){
                    self.nextbtn.click();
                },this.setting.delay);

            },

            //旋转
            carouseRotate:function(dir){
                var _this_=this;
                var zIndexArr=[];
                //左旋转
                if(dir==="left"){
                    this.posterItems.each(function(){
                        var self=$(this),
                            prev=self.prev().get(0)?self.prev():_this_.posterLastItem,
                            width=prev.width(),
                            height=prev.height(),
                            zIndex=prev.css("zIndex"),
                            opacity=prev.css("opacity"),
                            top=prev.css("top"),
                            left=prev.css("left");
                            zIndexArr.push(zIndex);
                        self.animate({
                                   width:width,
                                   height:height,
                                   opacity:opacity,
                                   left:left,
                                   top:top
                                },_this_.setting.speed,function(){
                                    _this_.rotateFlag=true;
                                });

                    });
                    //
                    this.posterItems.each(function(i){
                        $(this).css("zIndex",zIndexArr[i]);
                    });
                }else if(dir==="right"){
                    this.posterItems.each(function(){
                        var self=$(this),
                            next=self.next().get(0)?self.next():_this_.posterFirstItem,
                            width=next.width(),
                            height=next.height(),
                            zIndex=next.css('zIndex'),
                            opacity=next.css('opacity'),
                            left=next.css('left'),
                            top=next.css("top");
                            zIndexArr.push(zIndex);
                            self.animate({
                                   width:width,
                                   height:height,
                                   opacity:opacity,
                                   left:left,
                                   top:top,
                                },_this_.setting.speed,function(){
                                    _this_.rotateFlag=true;
                                });
                    });
                    this.posterItems.each(function(i){
                        $(this).css("zIndex",zIndexArr[i]);
                    });
                };
            },
            setPosterpos:function(){
                var self=this;
                  var sliceItems=this.posterItems.slice(1),
                      slicesize =sliceItems.size()/2;
                      rhsliceItem=sliceItems.slice(0,slicesize);
                      level      =Math.floor(this.posterItems.size()/2);
                      lfsliceItem=sliceItems.slice(slicesize);
                      //设置右边 
 var rw=this.setting.posterWidth*self.setting.scale;
var rh=this.setting.posterHeight*self.setting.scale;
var gap=((this.setting.width-this.setting.posterWidth)/2)/level;
                      rhsliceItem.each(function(i){
                        level--;
                        var j=i;
                        $(this).css({
                                   zIndex:level,
                                   width:rw,
                                   height:rh,
                                   opacity:1/(++j),
                                   left:rhlicew-rw,
                                   top:self.setVertical(rh)
                        });
                      });
                      //设置左边  
var lw=this.setting.posterWidth*self.setting.scale;
var lh=this.setting.posterHeight*self.setting.scale;
var loop=Math.floor(this.posterItems.size()/2);
                      lfsliceItem.each(function(i){
                        $(this).css({
                            zIndex:i,
                            width:lw,
                            height:lh,
                            opacity:1/loop,
                            left:0,
                            top:self.setting.height-lh
                        });
                        loop--;
                      });
            },

            //设置参数
            setSettingValue:function(){
                this.poster.css({
                             width:this.setting.width,
                             height:this.setting.height
                });
            this.posterItemMain.css({
                         width:this.setting.width,
                         height:this.setting.height
            });
            var w=(this.setting.width-this.setting.posterWidth)/2;
            var zIndexval=Math.ceil(this.posterItems.size()/2);
            this.nextbtn.css({
                         width:w,
                         height:this.setting.height,
                         zIndex:zIndexval

            });
            this.prevbtn.css({
                        width:w,
                        height:this.setting.height,
                        zIndex:zIndexval
            });
            this.posterFirstItem.css({
                        width:this.setting.posterWidth,
                        height:this.setting.posterHeight,
                        left:w,
                        top:0,
                        zIndex:zIndexval

            });
        },
        //获取人工指定的setting值
        getSetting:function(){
            var setting=this.poster.attr('data-setting');
            if(setting&&setting!=''){
                return $.parseJSON(setting);
            }else{
                return {};
            }
        }

    };
Carousel.init=function(posters){
    var _this_=this;
    posters.each(function(){
        new _this_($(this));
    });
};
window["Carousel"]=Carousel;
})(jQuery);