效果要求:一。大图自主向右滚动,滚动需要有滚动的过程而不是一下从第一张图跳到第二张图。
二。当鼠标移动到大图上的时候,大图的正下方出现所有大图的缩略图,鼠标移开的时候缩略图隐藏。
三。点击缩略图的时候大图做对应滚动,滚动的时候也不能一下滚动过去,需要有滚动的过程。
二。当鼠标移动到大图上的时候,大图的正下方出现所有大图的缩略图,鼠标移开的时候缩略图隐藏。
三。点击缩略图的时候大图做对应滚动,滚动的时候也不能一下滚动过去,需要有滚动的过程。
解决方案 »
- document.execCommand请教
- 页面内嵌跨域的iframe,用户点击iframe中的链接时,有没有可能得到链接的信息?
- JS操作表格的问题50分+50分
- 如何在html文档里使用Javascipt里定义的变量?
- 我发现了csdn一个漏洞!js相关的,希望对大家有用处。
- 理论上showModalDiaglog出来的窗口不能关闭打开它的窗口,但我还是想问。。。
- 请问如何将一个网页2包到网页1里面去
- (在线等……),一个级菜的问题,就是解决不了!一旦解答,马上给分!
- 如何在text文本框禁止输入字母,而且控制输入数字的范围在1到35之间(用javascript)
- 求大神翻译一下js
- extjs中的grid不显示问题
- js可以获得外部js文件里的变量值吗?
(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);
<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是一张有左,右箭头的图片
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; }
(function(){
$('#header').my_header({h:300,auto:true,go:'next',t:3});
})