图片轮换效果。

Question

效果要求：一。大图自主向右滚动，滚动需要有滚动的过程而不是一下从第一张图跳到第二张图。
          二。当鼠标移动到大图上的时候，大图的正下方出现所有大图的缩略图，鼠标移开的时候缩略图隐藏。
          三。点击缩略图的时候大图做对应滚动，滚动的时候也不能一下滚动过去，需要有滚动的过程。

Answer 1

jquery slider album自己搜索吧，一大堆。挑你需要的。

Answer 2

我自己写的一个小功能，基于jQuery的：
(function(a,b) {
   a.widget("ui.my_header", {
        options:{
    h:345,//焦点图高度
    auto:true,//是否自动播放
    go:'next',//自动播放参数：prev[上一张];next[下一张]
    t:3//自动播放时的时间间隔
}, _a:0,
_play:null,
_imgslide:null,//焦点图容器对象
_imgslideli:null,//焦点图个体对象
 _that:this,
_init:function(){
    this.createdom();
    
    var _this=this.element;//获取操作对象
    var _itemempty='';//焦点图空对像列表
    _imgslide=_this.find(".slide .slidelist");//焦点图容器对象
    _imgslideli=_imgslide.find("li");//焦点图个体对象
    
    if(_imgslideli.size()>0){
    
        var _itemtemp='<li><img src="'+this._resocucedomain+'/corpuser/widget/images/header/space.gif" width="100%" height="'+this.options.h+'px" alt=""></li>';//焦点图空对象html模板
        var _itemimg=_this.find('.slide .slidelist img');//焦点图列表真实图片列表
        $(_itemimg).each(function(){
                _itemempty+=_itemtemp;
            });             //将焦点图实体对象的值赋予对应的空对像集合
            $(".slidelist li").each(function(i){
                //以背景形式加载,无法完美自适应分辨率
            //$(this).children("img").css("background-image","url("+$(_itemimg[i]).attr("data-src")+")","background-repeat","repeat-x");
            //直接以原图形式加载,拉伸后可自适应分辨率，分辨率与原图尽寸差距较大时可能会变形
            $(this).children("img").attr("src",$(_itemimg[i]).attr("data-src"));
            });             //将焦点图个体空器设置为与当前对象等宽
            _imgslideli.width(_this.width()).height(this.options.h);
             //复制第1个焦点图对象，并附加于容器内用于填充最后一张时的空白
            _imgslideli.eq(0).clone().appendTo(_imgslide);
             
             _a=0;
            if(_itemimg.size()<=1){
                _this.find(".go").hide();
            }else{
                    this.ListenEvent();
                    if(this.options.auto){this.start();}
                }
            }
},
//追加样式；绑定导航菜单事件
createdom:function(){

    this.element.removeClass('header').addClass("header");      
     var _slide = this.element.find('.slide');
     var _h,_menutop;
     var _goH=(this.options.h/2)-10;
     _goH = _goH<106?106:_goH;
     if(_slide.size()==0){
        //无焦点图,显示默认图片
        _h='176px';
        _menutop='112px';
        this.element.css({"height":_h,"background-image":"url('/images/header/top.jpg')"});
     }else{
        _h=this.options.h+77+'px';
        _menutop=this.options.h+'px';
        _slide
        .css({"height":this.options.h+'px'})
        .find('.go').css({"top":_goH+'px'})
        .parents()
        .find('.slidelist').css({"height":this.options.h+'px'})
        .find('li').css({"height":this.options.h+'px'})
        .find('img').css({"height":this.options.h+'px'});
     }
     //定义当前容器高度和导航菜top偏离值
     this.element
     .css({"height":_h})
     .find('.sitemenu').css({"top":_menutop});
        },
        //部件的事件绑定
ListenEvent:function(){
   var _that=this;
    //左边按钮点击事件绑定
    this.element.find(".slide .igoleft").click(function(){
        _that.select('prev');
        });
         //右边按钮点击事件绑定
        this.element.find(".slide .igoright").click(function(){
        _that.select('next');
        });
        //鼠标悬浮与离开事件绑定
        if(this.options.auto){
            this.element.find(".slide").bind({
                    "mouseover": function () {
                            _that.stop();
                     },
                     "mouseleave": function () {
                           _that.start();
                     }
                });
            };
},
start:function(){
            var _that=this;
            if(typeof(_play)!="undefined"){_that.stop()}
            _play = setInterval(function() {_that.select(_that.options.go)},this.options.t*1000);
        },
        stop:function(){
            clearInterval(_play);
        },
select:function(t){
    switch(t){
        case "prev":
            if(_a==0){
            _a=_imgslideli.size();
            _imgslide.css({left:-(_imgslideli.width())*_imgslideli.size()})
            };
            _imgslide.animate({left: "+="+(_imgslideli.width())}, 1000);//显示上一张：从左向右滑行容器的宽度距离
            _a--;
            break;
        default://默认显示下一张 options.go:next 
             //当前显示到最后一张时,初始化计数器和偏离的状态值,因为在原始列表后额外附加了第一张图以便无缝衔接
             if(_a==_imgslideli.size()){_a=0;_imgslide.css({left:0});}
                 _imgslide.animate({left: "-="+(_imgslideli.width())}, 1000);//显示下一张：从右向左滑行容器的宽度距离
                 _a++;
             break;
    };
}
    })
  
   
  
})(jQuery);

Answer 3

DOM：
    <div id="header">
        
        <div class="slide">
            <ul class="slidelist">
                <li><img src="/images/space.gif" data-src="b/1.jpg" width="100%" height="223" alt=""/></li>
                <li><img src="/images/space.gif" data-src="b/2.jpg" width="100%" height="223" alt=""/></li>
                <li><img src="/images/space.gif" data-src="b/3.jpg" width="100%" height="223" alt=""/></li>
                <li><img src="/images/space.gif" data-src="b/4.jpg" width="100%" height="223" alt=""/></li>
                <li><img src="/images/space.gif" data-src="b/5.jpg" width="100%" height="223" alt=""/></li>
                <li><img src="/images/space.gif" data-src="b/6.jpg" width="100%" height="223" alt=""/></li>
            </ul>
            <div class="go" style="position:absolute;background:url(/images/header/bg12.png) no-repeat left center; height:52px; width:100%; margin:0px 0 0 -500px; top:110px; left:50%; z-index:0;"> <em class="fl igoleft"></em> <em class="fr igoright"></em> </div>
        </div>
    </div>其中：/images/space.gif是一张空图片
/images/header/bg12.png是一张有左，右箭头的图片

Answer 4

CSS:
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,em,img,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
.fl{float:left;}
.fr{float:right;}
body ul li{list-style:none;}
.header{width:100%;position:relative;z-index:0; overflow:hidden; zoom:1;font:12px/1.5 tahoma,arial,\5b8b\4f53;margin:0;padding:0;border:0;vertical-align:baseline;}
.header a{color:#606060;text-decoration:none;}
.header a:hover{color:#ff3000; text-decoration:none;}
.header .slide{ position:absolute;width:100%; left:0; top:0; overflow:hidden; z-index:0;}
.header .slidelist{ position:absolute;width:1260em;}
.header .slidelist li{ float:left; background:#fff url(images/header/loading.gif) no-repeat center;}
.header .slidelist li img{ }
.header .go{ }
.header .go em{ width:45%; height:69px; display:inline-block; cursor:pointer;}
.header .wrap{ width:100%; margin:0 auto; clear:both;height:45px;position:relative; z-index:0; }

Answer 5

我发了个站内信给你 能直接 发完整的 demo 给我么？邮箱已经在站内信发给你了。谢谢

Answer 6

调用：
(function(){
   $('#header').my_header({h:300,auto:true,go:'next',t:3}); 
})