当前位置:首页 > 网页特效 > 焦点图 >

js腾讯视频网站焦点图

时间:2014-08-19 08:37 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

js腾讯视频网站焦点图是一款仿qq腾讯视频网站的JS焦点图片轮播切换。js腾讯图片切换电影网站 所属专题:焦点图代码

<script type="text/javascript" src="js/startMove.js"></script>
<script type="text/javascript">
window.onload=function(){
var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
var aTextLi=document.getElementById('text_list').getElementsByTagName('li');
var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
var oPrev=document.getElementById('btn_prev');
var oNext=document.getElementById('btn_next');
var oDiv=document.getElementById('box');
var i=0;
var iNowUlLeft=0;
var iNow=0;

oPrev.onclick=function(){
if(iNowUlLeft>0){
iNowUlLeft--;
oUlleft();
}
oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
}

oNext.onclick=function(){
if(iNowUlLeft<aIcoLi.length-7){
iNowUlLeft++;
oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
}
oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
}

for(i=0;i<aIcoLi.length;i++){
aIcoLi[i].index=i;
aIcoLi[i].onclick=function(){
if(iNow==this.index){
return false;
}
iNow=this.index;
tab();
}
}

function tab(){
for(i=0;i<aIcoLi.length;i++){
aIcoLi[i].className='';
aPicLi[i].style.filter='alpha(opacity:0)';
aPicLi[i].style.opacity=0;
aTextLi[i].getElementsByTagName('h2')[0].className='';
miaovStopMove( aPicLi[i]);
}
aIcoLi[iNow].className='active';
//aPicLi[this.index].style.filter='alpha(opacity:100)';
//aPicLi[this.index].style.opacity=1;
miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);
aTextLi[iNow].getElementsByTagName('h2')[0].className='show';
}

function oUlleft(){
oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
}

function autoplay(){
iNow++;
if(iNow>=aIcoLi.length){
iNow=0;
}
if(iNow<iNowUlLeft){
iNowUlLeft=iNow;
}else if(iNow>=iNowUlLeft+7){
iNowUlLeft=iNow-6;
}
oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
oUlleft();
tab();
}

var time=setInterval(autoplay,3000);
oDiv.onmouseover=function(){
clearInterval(time);
}
oDiv.onmouseout=function(){
time=setInterval(autoplay,3000);
}


}
</script>

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

焦点图下载排行

最新文章