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仿腾讯娱乐频道焦点图特效的全部内容,希望大家能够喜欢。