js腾讯视频网站焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js腾讯视频网站焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js腾讯视频网站焦点图</title>
</head>

<body>
<!--演示内容开始-->
<link href="css/style.css" rel="stylesheet" />
<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>

<div style="width:760px;margin:20px auto; clear:both; text-align:center;  "><script src="/demo/js/ad_js/76090.js" type="text/javascript"></script></div>

<div id="box">
	<ul id="pic_list">
		<li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
        <a href="#"><img width="660" height="330" src="img/pic_1.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_2.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_3.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_4.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_5.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_6.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_7.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_8.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_9.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_10.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_11.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_12.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_13.jpg" alt="" /></a></li>
		<li><a href="#"><img width="660" height="330" src="img/pic_14.jpg" alt="" /></a></li>
	</ul>
	
	<div class="mark"></div>

	<ul id="text_list">
		<li><h2 class="show"><a href="#">新闻标题 新闻标题...</a></h2></li>
		<li><h2><a href="#">新闻标题 新闻标题可自拔...</a></h2></li>
		<li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
		<li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
		<li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="#">新闻标题 新闻标题..</a></h2></li>
	</ul>
	
	<div id="ico_list">
		<ul>
			<li class="active"><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_1.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_2.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_3.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_4.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="125" height="70" src="img/ico_5.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_6.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_7.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="62" height="34" src="img/ico_8.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_9.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_10.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_11.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_12.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_13.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_14.jpg" alt="" /></a></li>
		</ul>
	</div>
	
	<a href="javascript:void(0)" id="btn_prev" class="btn"></a>
	<a href="javascript:void(0)" id="btn_next" class="btn showBtn"></a>
</div>
</body>
</html>

JS代码(startMove.js):

function css(obj,attr,value){
	if(arguments.length==2){
	if(attr!='opacity'){
	return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj,false)[attr]);
}
else{
	return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj,false)[attr]));
}
}
else if(arguments.length==3)switch(attr){
	case 'width':case 'height':case 'paddingLeft':case 'paddingTop':case 'paddingRight':case 'paddingBottom':value=Math.max(value,0);
	case 'left':case 'top':case 'marginLeft':case 'marginTop':case 'marginRight':case 'marginBottom':obj.style[attr]=value+'px';
	break;
	case 'opacity':obj.style.filter="alpha(opacity:"+value+")";
	obj.style.opacity=value/100;
	break;
	default:obj.style[attr]=value;
}
return function (attr_in,value_in){
	css(obj,attr_in,value_in)}
;
}
var MIAOV_MOVE_TYPE={
	BUFFER:1,FLEX:2}
;
	function miaovStopMove(obj){
	clearInterval(obj.timer);
}
function miaovStartMove(obj,oTarget,iType,fnCallBack,fnDuring){
	var fnMove=null;
	if(obj.timer){
	clearInterval(obj.timer);
}
switch(iType){
	case MIAOV_MOVE_TYPE.BUFFER:fnMove=miaovDoMoveBuffer;
	break;
	case MIAOV_MOVE_TYPE.FLEX:fnMove=miaovDoMoveFlex;
	break;
}
obj.timer=setInterval(function (){
	fnMove(obj,oTarget,fnCallBack,fnDuring);
}
,30);
}
function miaovDoMoveBuffer(obj,oTarget,fnCallBack,fnDuring){
	var bStop=true;
	var attr='';
	var speed=0;
	var cur=0;
	for(attr in oTarget){
	cur=css(obj,attr);
	if(oTarget[attr]!=cur){
	bStop=false;
	speed=(oTarget[attr]-cur)/5;
	speed=speed>0?Math.ceil(speed):Math.floor(speed);
	css(obj,attr,cur+speed);
}
}
if(fnDuring)fnDuring.call(obj);
	if(bStop){
	clearInterval(obj.timer);
	obj.timer=null;
	if(fnCallBack)fnCallBack.call(obj);
}
}
function miaovDoMoveFlex(obj,oTarget,fnCallBack,fnDuring){
	var bStop=true;
	var attr='';
	var speed=0;
	var cur=0;
	for(attr in oTarget){
	if(!obj.oSpeed)obj.oSpeed={
}
;
	if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
	cur=css(obj,attr);
	if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1){
	bStop=false;
	obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
	obj.oSpeed[attr]*=0.7;
	css(obj,attr,cur+obj.oSpeed[attr]);
}
}
if(fnDuring)fnDuring.call(obj);
	if(bStop){
	clearInterval(obj.timer);
	obj.timer=null;
	if(fnCallBack)fnCallBack.call(obj);
}
}

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* box */
#box{width:660px;height:330px;position:relative;overflow:hidden;margin:60px auto 0;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
.mark{height:90px;width:660px;background:#000;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{position:absolute;bottom:60px;left:50px;position:absolute;z-index:5;height:20px;overflow:hidden;}
#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list a{color:#FFFFFF;font-family:"Microsoft YaHei";font-size:18px;font-weight:normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border:2px solid #DFE8E4;height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(../img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border:3px solid #fff;height:34px;width:62px;}
.btn{background:url(../img/btn.gif) no-repeat;height:38px;width:38px;position:absolute;bottom:11px;opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{opacity:1;filter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}

附件:下载该文件资源,减少时间成本(增值服务)