这是楼主自学前端练习的一个小项目，欢迎大家来指正错误。欢迎加入前端自学群68701672。本群以项目为核心进行前端学习研究。此处用到豆瓣官方提供的API 核心代码如下

var currentIndex=0;
var movieNum=0;

$(".micon-sou").on("click",function(){
    currentIndex=0
    getmovie(currentIndex)
})

$(".rightnav").on("click",function(){
     getNextMoive();
})

$(".leftnav").on("click",function(){
     getPreMoive();
})

function getmovie(currentIndex){
    $.ajax({
        url: 'https://api.douban.com/v2/movie/search',
        dataType: 'jsonp',
        method: 'get',
        data:{
              'q': $('.search-input').val(),
            },
        jsonp: "callback",
        jsonpCallback:"success_jsonpCallback",
        success: function (res) {
            var json = res.subjects[currentIndex];
            var actorstr="";
            movieNum=res.subjects.length;
            title=json.title;
            url=json.images.large;
            director=json.directors[0].name;
            $('.movie-title').text(title);
            $('.movie-director-name').text(director);
            for(i=0;i<json.casts.length;i++){
                actorstr+=json.casts[i].name;
                actorstr+='，';
            }
            actorstr.substring(0,json.casts.length+1);
            $('.movie-actor-name').text(actorstr)
            $(".content-img").css({
                'background':'url('+url+')',
                'background-repeat': 'no-repeat',
                'background-position': 'center',
                'background-size': 'cover',
            });
            rating.init('.movie-pingfen',{
                num:Math.round(json.rating.average/2),
                readOnly:true
            });
        }
    })
};

function getNextMoive(){    
    if(currentIndex>=movieNum-1){
        currentIndex=0;
    }else{
        currentIndex+=1;
    }
    getmovie(currentIndex);
}

function getPreMoive(){
    if(currentIndex<=0){
        currentIndex=movieNum-1
    }else{
        currentIndex-=1;
    }
    getmovie(currentIndex);
}

//评星组件
var rating = (function(){
    //点亮整颗星星
    var lightEntire = function (el, options){
        this.$el = $(el);       
        this.$item = this.$el.find('.micon-pingfen');       
        this.opts = options;
    };
    lightEntire.prototype.init = function(){
        this.lightOn(this.opts.num);
        if(!this.opts.readOnly){
            this.bindEvent();
        }
    };
    lightEntire.prototype.lightOn = function(num){
        num = parseInt(num);
        this.$item.each(function(index){
            if(index<num){
                $(this).addClass('love');
            }else{
                $(this).removeClass('love');
            }
        });
    };
    lightEntire.prototype.bindEvent = function(){
        var self = this;
        var itemLength = self.$item.length;
        self.$el.on('mouseover','.micon-pingfen',function(){
            var num = $(this).index()+1;
            self.lightOn(num);
            (typeof self.opts.select === 'function') && self.opts.select.call(this,num,itemLength);
            self.$el.trigger('select',[self.opts.num,itemLength]);
        }).on('click','.micon-pingfen',function(){
            self.opts.num = $(this).index()+1;
            (typeof self.opts.chosen === 'function') && self.opts.chosen.call(this,num,itemLength);
            self.$el.trigger('chosen',[self.opts.num,itemLength]);
        }).on('mouseout',function(){
            self.lightOn(self.opts.num);
        });
    };

    //默认参数
    var defaults = {
        num:0,
        readOnly:false,
        select:function(){},
        chosen:function(){}
    };

    //初始化

    var init = function(el,options) {
        options = $.extend({},defaults,options);
        new lightEntire(el,options).init();
    };

    return {
        init:init
    };

})();

$('#rating').on('select',function(e,num,total){

}).on('chosen',function(e,num,total){

});