图片轮换效果。

我自是年少-韶华倾负 2012-08-31 02:25:12
效果要求:一。大图自主向右滚动,滚动需要有滚动的过程而不是一下从第一张图跳到第二张图。
二。当鼠标移动到大图上的时候,大图的正下方出现所有大图的缩略图,鼠标移开的时候缩略图隐藏。
三。点击缩略图的时候大图做对应滚动,滚动的时候也不能一下滚动过去,需要有滚动的过程。
...全文
115 点赞 收藏 11
写回复
11 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
泡泡鱼_ 2012-08-31
55555555555555

满天神佛呀,给道雷给LZ吧,把他劈成非洲人算了。真黑呀。一分都不给俺
回复
泡泡鱼_ 2012-08-31
你的工作我来做,你的工资是不是也给我咧?

朋友,做人要厚道。给了你基础实现,些微的修改你应该自己来

算了,你要求的效果我已经发给你了,算是推你入火海了吧。别找我报仇就是了

PS:不给分我会咬人的
回复
大侠我是个菜鸟。你发的还是不太完整能弄个完整的给我么。谢谢啦
回复
还是不太完整啊,大侠。我是个菜鸟。能弄个完整版的么?
回复
泡泡鱼_ 2012-08-31
已经发你邮箱了。。。。。。
回复
泡泡鱼_ 2012-08-31
调用:
(function(){
$('#header').my_header({h:300,auto:true,go:'next',t:3});
})
回复
我发了个站内信给你 能直接 发完整的 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:
    <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);
回复
jquery slider album自己搜索吧,一大堆。挑你需要的。
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告