Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
一个仿腾讯娱乐频道焦点图轮播的插件
ui3g.js
/*
顶部大图滚动
*/
varslide=(function(){
varquadEaseOut;
vardoc=document;
var$=function(s){
returndocument.getElementById(s);
}
/**
获取索引值，工具类
@param{Element}current当前元素
@param{Object}obj元素集合
**/
vargetIndex=function(current,obj){
for(vari=0;i<obj.length;i++){
if(obj[i]==current){
returni;
}
}
};
/**
@param{Element}el目标元素
**/
varsiblings=function(el){
varr=[],
n=el.parentNode.firstChild;
for(;n;n=n.nextSibling){
if(n.nodeType===1&&n!==el){
r.push(n);
}
}
returnr;
};
/**
设置Slide宽高
@param{Element}elSlide元素
@param{Number}widthSlide宽度
@param{Number}heightSlide高度
**/
varsetSlideWH=function(el,width,height){
varstyleW,
styleH;
if(width=='100%'){ //自适应宽度
styleW='100%';
}else{ //定宽
styleW=width+'px';
}
if(height=='100%'){ //自适应高度
styleH='100%';
}else{ //定高
styleH=height+'px';
}
el.style.width=styleW;
el.style.height=styleH;
};
varreadStyle=function(obj,name){
if(obj.style[name]){
returnobj.style[name];
}elseif(obj.currentStyle){
returnobj.currentStyle[name]
}elseif(document.defaultView&&document.defaultView.getComputedStyle){
vard=document.defaultView.getComputedStyle(obj,null);
returnd.getPropertyValue(name)
}else{
returnnull
}
};
varstyle={
setOpacity:function(obj,opacity){
if(typeof(obj.style.opacity)!='undefined'){
obj.style.opacity=opacity;
}else{
obj.style.filter='Alpha(Opacity='+(opacity*100)+')';
};
}
};
/*动画*/
varextend={
/**
渐显元素
@param{Element}target目标元素
**/
fadeIn:function(obj,time){
if(readStyle(obj,'display')=='none'){
obj.style.display='block';
};
style.setOpacity(obj,0);
time=time||200;
varopacity=0,step=time/20;
clearTimeout(obj.showT);
obj.showT=setTimeout(function(){
if(opacity>=1){style.setOpacity(obj,1);return;}
opacity+=1/step;
style.setOpacity(obj,opacity);
obj.showT=setTimeout(arguments.callee,20);
},20);
},
/**
渐隐元素
@param{Element}target目标元素
**/
fadeOut:function(obj,time){
time=time||200;
style.setOpacity(obj,1);
varopacity=1,step=time/20;
clearTimeout(obj.showT);
obj.showT=setTimeout(function(){
if(opacity<=0){
obj.style.display='none';
style.setOpacity(obj,0);
return;
};
opacity-=1/step;
obj.showT=setTimeout(arguments.callee,20);
},20);
},
/**
动画元素
@param{Element}target目标元素
@param{String}keytarget样式
@param{Number}startkey初始值
@param{Number}endkey结束值
@param{Number}speed速度
@param{Function}endFn结束时的回调
@param{String}u样式单位
**/
actPX:function(obj,key,start,end,speed,endFn,u){
if(typeof(u)=='undefined'){u='px'};
clearTimeout(obj['_extend_actPX'+key.replace(/\-\.\=/,'_')+'_timeOut']);
if(start>end){
speed=-Math.abs(speed);
}else{
speed=Math.abs(speed);
};
varnow=start;
varlength=end-start;
obj['_extend_actPX'+key.replace(/\-\.\=/,'_')+'_timeOut']=setTimeout(function(){
now+=speed;
varspace=end-now;
if(start<end){
if(space<length/3){
speed=Math.ceil(space/3);
};
if(space<=0){
obj[key]=end+u;
if(endFn){endFn()};
return;
};
}else{
if(space>length/3){
speed=Math.floor(space/3);
};
if(space>=0){
obj[key]=end+u;
if(endFn){endFn()};
return;
};
};
obj[key]=now+u;
obj['_extend_actPX'+key.replace(/\-\.\=/,'_')+'_timeOut']=setTimeout(arguments.callee,20);
},20);
}
}
/**
配置
**/
varconfig={
imgData:[], //初使化图片信息
imgTargetId:'', //初使化Slide目标ID
imgWidth:'100%', //初使化图片宽度
imgHeight:'100%', //初使化图片高度
imgAuto:false, //初使化自动播放
imgInterval:3000, //初使化间隔时间
imgDataLen:0, //初使化图片数量
goSwitch:true, //鼠标悬停时切换状态
index:4, //焦点所在索引值
_index:0,
curImg:5,
indexShow:5
};
/**
生成并插入Slide结构
**/
varbuildSlide=function(){
//注入Slide结构
varpanelHtml =$('_slide').getElementsByTagName('ul')[0].innerHTML;
varaLi=$('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
$('_slide').getElementsByTagName('ul')[0].innerHTML=panelHtml+panelHtml;
//设置宽高
setSlideWH($(config.imgTargetId),config.imgWidth,config.imgHeight);
$('_slide').getElementsByTagName('ul')[0].style.left='-'+aLi[0].offsetWidth*4+'px';
};
quadEaseOut=function(t,b,c,d,s){
return-c*(t/=d)*(t-2)+b;
};
varmove=function(){
//vare=this;
clearTimeout(config.timer),
config.t<50?(boxMoveTo(Math.round(quadEaseOut(config.t+=3,config.b,config.c,50))),config.timer=setTimeout(function(){move()},30)):boxMoveTo(config.target)
}
varboxMoveTo=function(e){
$('slide_list').style.left=e+"px"
}
//vardotNum=0;
vard =false;
varrun=function(e,t){
varslideList=$('slide_list').getElementsByTagName('li');
dotList=$("focus_dot").getElementsByTagName('li');
slideList[config._index].className='';
for(vari=0;i<config.imgData*2;i++){
slideList[i].className='';
slideList[i].getElementsByTagName("p")[0].style.display='none';
}
for(vari=0;i<config.imgData;i++){
dotList[i].className='';
}
e=e<0?config.imgData-1:e>config.imgData?1:e,
config.target=-Math.abs(slideList[0].offsetWidth)*(config.index=e),
config.t=0,
config.b=t?config.target-slideList[0].offsetWidth:config.target+slideList[0].offsetWidth,
config.c=config.target-config.b,
move();
config.curImg=config.index+1>6?1:(config.index+1);
slideList[config.curImg].className='cur';
vardotN=0;
if(config.index>=4){
dotN=config.index-4;
}else{
dotN=config.curImg;
}
dotList[dotN].className="current";
slideList[config.curImg].getElementsByTagName("p")[0].style.display='block';
config._index=config.curImg;
}
/**
自动切换
**/
varb=false,c=false,timerA=null;
varautoSwitch=function(){
varslideList=$('slide_list').getElementsByTagName('li');
//遍历触发器
for(vari=0;i<config.imgDataLen;i++){
//找到当前触发器
if(slideList[i].className=='cur'){
//获得当前触发器的索引
config.index=getIndex(slideList[i],slideList);
}
}
varautoFun=function(){
if(config.goSwitch){
config.index=config.index==5?0:config.index;
if(!b){
b=true;
config.index=0;
}
if(config.index==3&&!c){
clearInterval(timerA);
timerA=setInterval(autoFun,10000);
c=true;
}elseif(c){
c=false;
clearInterval(timerA);
timerA=setInterval(autoFun,config.imgInterval);
}
//console.log(config.index);
run(config.index,!1);
config.index+=1;
}
};
timerA=setInterval(autoFun,config.imgInterval);
};
/**
手指事件
**/
vartouchFun=function(evt){
var$=function(o){returndocument.querySelector(o)},$$=function(o){returndocument.querySelectorAll(o)},touchInfo={startX:0,endX:0},slide=$('#slide'),btnL=$('#sliderL'),btnR=$('#sliderR');
slide.addEventListener('touchstart',function(evt){
evt.preventDefault();
if(evt.changedTouches.length==0) return;
touchInfo.startX=evt.changedTouches[0].pageX;
},false);
slide.addEventListener('touchend',function(evt){
evt.preventDefault();
if(evt.changedTouches.length==0)return;
touchInfo.endX=evt.changedTouches[0].pageX;
varoffset=touchInfo.endX-touchInfo.startX;
if(offset<0){
run(++config.index,!1)
}elseif(offset>0){
run(--config.index,!0)
}else{
if(evt.target.parentNode.parentNode.className=='cur'){
window.open(evt.target.parentNode.getAttribute('href'),'_blank');
}else{
return;
}
}
},false);
btnL.addEventListener('touchend',function(){run(++config.index,!1)},false)
btnR.addEventListener('touchend',function(){run(--config.index,!0)},false)
};
return{
init:function(obj,e){
//获取配置信息
config.imgData=obj.data; //设置图片信息
config.imgTargetId=obj.targetId; //设置Slide目标ID
config.imgWidth=obj.width||config.imgWidth; //设置图片宽度
config.imgHeight=obj.height||config.imgHeight; //设置图片高度
config.imgAuto=obj.auto||config.imgAuto; //设置自动播放
config.imgInterval=obj.interval||config.imgInterval;//设置间隔时间
//config.imgDataLen=config.imgData.length; //设置图片数量
//生成Slide结构
buildSlide();
varslideList=$('slide_list').getElementsByTagName('li');
$('slide_list').style.width=slideList[0].offsetWidth*slideList.length+'px';
slideList[config.curImg].className='cur';
varbtnL=$('sliderL'),btnR=$('sliderR'),btnClose=$('slidClosed');
btnR.onclick=function(){
clearInterval(timerA);
config.index+=1;
run(config.index,!1)
}
btnL.onclick=function(){
clearInterval(timerA);
config.index-=1;
run(config.index,!0)
}
$('slide').onmouseover=function(event){
config.index=Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
clearInterval(timerA);
timerA=null;
event.stopPropagation();
}
$('slide').onmouseout=function(event){
if(config.imgAuto){
autoSwitch();
}
config.index=config.curImg;
event.stopPropagation();
}
if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
touchFun(e);
}
//自动切换
if(config.imgAuto){
autoSwitch();
}
dotList=$("focus_dot").getElementsByTagName('li');
varn;
for(n=0;n<dotList.length;n++){
dotList[n].index=n;
dotList[n].onclick=function(){
if(config.curImg==this.index||config.curImg==this.index+5)return;
varn=0;
n=config.curImg>4?0:config.curImg;
if(this.index>n){
run(this.index-1,!1);
}else{
run(this.index-1,!0)
}
config.curImg=this.index;
}
}
}
}
})();
html
<divclass="slider-container"id="slide"style="width:100%;height:480px;">
<divid="_slide"class="slider-wrap">
<ulid="slide_list">
<libosszone="Jdt">
<ahref="#"class="pic"><imgsrc="images/demo1.jpg"width="830"height="350"border="0">
<pclass="st_ty">《北爱》陈思诚激吻佟丽娅公主抱不慎走光</p>
</a>
<divclass="slide_Bg"></div>
</li>
<libosszone="Jdt">
<ahref="#"class="pic"><imgsrc="images/demo2.jpg"width="830"height="350"border="0">
<pclass="st_ty">林志玲捞金鱼尾纹再现遭男子摸背熊抱尴尬挤笑</p>
</a>
<divclass="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<ahref="#"class="pic"><imgsrc="images/demo3.jpg"width="830"height="350"border="0">
<pclass="st_ty">芙蓉姐姐大摆S型秀瘦腰长腿调戏记者：想追求我？</p>
</a>
<divclass="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<ahref="#"title=""class="pic"><imgsrc="images/demo4.jpg"width="830"height="350"border="0">
<pclass="st_ty">柳岩：消费我你们在我胸前也看不出一朵花来</p>
</a>
<divclass="slide_Bg"></div>
</li>
<li>
<dl>
<ddid="ad1" bosszone="jdtAd1">
<ahref="#"class="pic"><imgsrc="images/89854294.jpg"width="363"height="350"border="0">
<pclass="st_ty">萌妹教你白全身</p>
</a></dd>
<ddid="ad2" bosszone="jdtAd2">
<ahref="#"class="pic"><imgsrc="images/90233983.jpg"width="156"height="350"border="0">
<pclass="st_ty">学我按3穴位变大胸</p>
</a></dd>
<ddid="ad3" bosszone="jdtAd3">
<ahref="#"class="pic"><imgsrc="images/89854500.jpg"width="156"height="350"border="0">
<pclass="st_ty">男人更爱“坏”女人</p>
</a></dd>
<ddid="ad4" bosszone="jdtAd4">
<ahref="#"class="pic"><imgsrc="images/89858252.jpg"width="156"height="350"border="0">
<pclass="st_ty">女神自曝美胸手法</p>
</a></dd>
</dl>
<divclass="slide_Bg"></div>
</li>
</ul>
</div>
<ahref="javascript:void(0);"class="slider-btnslider-btn-l"id="sliderL"bosszone="photoPre"></a>
<ahref="javascript:void(0);"class="slider-btnslider-btn-r"id="sliderR"bosszone="photoNext"></a>
<ulid="focus_dot">
<liclass="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var$=function(s){
returndocument.getElementById(s);
}
//参数配置
slide.init({
//width:100%, //焦点图宽度（非必须，默认值自适应）
height:390, //焦点图高度（非必须，默认值自适应）
auto:true, //是否自动切换（非必须，默认值false）
interval:5000, //切换间隔时间（非必须，默认值3000，当auto为true时有效）
targetId:'slide', //html对应的焦点图ID（必须）
data:$('_slide').getElementsByTagName('li').length//焦点图数据（必须）
});
</script>
<script>window.onerror=function(){returntrue;};</script>
以上就是给大家分享的jQuery仿腾讯娱乐频道焦点图特效的全部内容，希望大家能够喜欢。