您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 焦点图 >

    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>

    js腾讯视频网站焦点图由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jiaodiantu/10104.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!