87,910
社区成员
发帖
与我相关
我的任务
分享图片轮换效果。
效果要求：一。大图自主向右滚动，滚动需要有滚动的过程而不是一下从第一张图跳到第二张图。
二。当鼠标移动到大图上的时候，大图的正下方出现所有大图的缩略图，鼠标移开的时候缩略图隐藏。
三。点击缩略图的时候大图做对应滚动，滚动的时候也不能一下滚动过去，需要有滚动的过程。
二。当鼠标移动到大图上的时候，大图的正下方出现所有大图的缩略图，鼠标移开的时候缩略图隐藏。
三。点击缩略图的时候大图做对应滚动，滚动的时候也不能一下滚动过去，需要有滚动的过程。
...全文
请发表友善的回复…
发表回复
泡泡鱼_ 2012-08-31
- 打赏
- 举报
55555555555555
满天神佛呀，给道雷给LZ吧，把他劈成非洲人算了。真黑呀。一分都不给俺
满天神佛呀，给道雷给LZ吧，把他劈成非洲人算了。真黑呀。一分都不给俺
泡泡鱼_ 2012-08-31
- 打赏
- 举报
你的工作我来做，你的工资是不是也给我咧？
朋友，做人要厚道。给了你基础实现，些微的修改你应该自己来
算了，你要求的效果我已经发给你了，算是推你入火海了吧。别找我报仇就是了
PS：不给分我会咬人的
朋友，做人要厚道。给了你基础实现，些微的修改你应该自己来
算了，你要求的效果我已经发给你了，算是推你入火海了吧。别找我报仇就是了
PS：不给分我会咬人的
我自是年少-韶华倾负 2012-08-31
- 打赏
- 举报
大侠我是个菜鸟。你发的还是不太完整能弄个完整的给我么。谢谢啦
我自是年少-韶华倾负 2012-08-31
- 打赏
- 举报
还是不太完整啊，大侠。我是个菜鸟。能弄个完整版的么?
泡泡鱼_ 2012-08-31
- 打赏
- 举报
已经发你邮箱了。。。。。。
泡泡鱼_ 2012-08-31
- 打赏
- 举报
调用：
(function(){
$('#header').my_header({h:300,auto:true,go:'next',t:3});
})我自是年少-韶华倾负 2012-08-31
- 打赏
- 举报
我发了个站内信给你 能直接 发完整的 demo 给我么？邮箱已经在站内信发给你了。谢谢
泡泡鱼_ 2012-08-31
- 打赏
- 举报
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; }泡泡鱼_ 2012-08-31
- 打赏
- 举报
DOM：
其中：/images/space.gif是一张空图片
/images/header/bg12.png是一张有左，右箭头的图片
<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是一张有左，右箭头的图片
泡泡鱼_ 2012-08-31
- 打赏
- 举报
我自己写的一个小功能，基于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);
去圣西罗-为尤文喝彩 2012-08-31
- 打赏
- 举报
jquery slider album自己搜索吧，一大堆。挑你需要的。
