天娱传媒官网百叶窗banner轮播滚动切换特效代码

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

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

以下是天娱传媒官网百叶窗banner轮播滚动切换特效代码的示例演示效果:

当前平台(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>天娱传媒官网百叶窗banner</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/banner.js" type="text/javascript"></script>
</head>
<body>
 <div id="myFocus" class="mF_liuzg">
    <div class="loading"><span>请稍候...</span></div>
    <ul class="pic">
        <li>
        <a href="#" target="_blank"><img src="images/1.jpg"/></a>
        <span class="txt-bg"><a href="#" target="_blank">“快男”突围赛双直播夺全国冠军 年轻观众市场遥遥领先</a></span>
        </li>
        
        <li>
        <a href="#" target="_blank"><img src="images/2.jpg"/></a>
        <span class="txt-bg"><a href="#" target="_blank">李宇春再登杂志封面 黑白大片演绎春式时尚</a></span>
        </li>
        
        <li>
        <a href="#" target="_blank"><img src="images/3.jpg"/></a>
        <span class="txt-bg"><a href="#" target="_blank">刘忻新书《随忻所遇》签售会即将启动</a></span>
        </li>
        
        <li>
        <a href="#" target="_blank"><img src="images/4.jpg"/></a>
        <span class="txt-bg"><a href="#" target="_blank">曾轶可《会飞的贼》MV独家首播 解读暗恋心事</a></span>
        </li>
        
        <li>
        <a href="#" target="_blank"><img src="images/5.jpg"/></a>
        <span class="txt-bg"><a href="#" target="_blank">魏晨加盟碧海金沙音乐节 劲歌热舞引爆夏日狂欢</a></span>
        </li>
    </ul>
</div>
</body>
</html>

JS代码(banner.js):

var myFocus={
	$:function(id){
	return document.getElementById(id);
}
,$$:function(tag,obj){
	return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);
}
,style:function(obj,style){
	return (+[1,])?window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
}
,//getStyle简化版 easeOut:function(t,b,c,d){
	return -c*((t=t/d-1)*t*t*t - 1) + b;
}
,move:function(obj,prop,val,type,spd,fn){
	//运动函数，spd为运动需要的时间，时间越大速度越小 var t=0,b=parseInt(this.style(obj,prop)),c=val-b,d=spd||50,st=type,m=c>0?'ceil':'floor';
	if(obj[prop+'Timer']) clearInterval(obj[prop+'Timer']);
	obj[prop+'Timer']=setInterval(function(){
	if(t<d){
	obj.style[prop]=Math[m](myFocus[st](++t,b,c,d))+'px';
}
else{
	clearInterval(obj[prop+'Timer']);
	fn&&fn.call(obj);
}
}
,10);
	return this;
}
,addList:function(obj,cla,x){
	//生成HMTL,cla为列表的class,其中封装有:cla='txt'(生成alt文字),cla='num'(生成按钮数字),cla='thumb'(生成小图) var s=[],n=x||this.$$('li',this.$$('ul',obj)[0]).length,num=cla.length;
	for(var j=0;
	j<num;
	j++){
	s.push('<ul class='+cla[j]+'>');
	for(var i=0;
	i<n;
	i++){
	s.push('<li>'+(cla[j]=='num'?(i+1):(cla[j]=='txt'?this.$$('li',obj)[i].innerHTML.replace(/\<img.*?\>/i,this.$$('img',obj)[i].alt):(cla[j]=='thumb'?'<img src='+(this.$$('img',obj)[i].getAttribute("thumb")||this.$$('img',obj)[i].src)+' />':'')))+'<span></span></li>')}
;
	s.push('</ul>');
}
;
	obj.innerHTML+=s.join('');
}
,setting:function(par){
	if(window.attachEvent){
	window.attachEvent('onload',function(){
	myFocus[par.style](par)}
);
}
else{
	window.addEventListener('load',function(){
	myFocus[par.style](par)}
,false);
}
}
,mF_liuzg:function(par){
	var box=this.$(par.id),boxH=box.offsetHeight,t=par.time*1000;
	this.addList(box,['txt-bg','txt','num']);
	var pic=this.$$('li',this.$$('ul',box)[0]),n=pic.length;
	var c=boxH%par.chip?8:par.chip,h=boxH/c,pics=[];
	for(var i=0;
	i<c;
	i++){
	pics.push('<li><p>') for(var j=0;
	j<n;
	j++) pics.push(pic[j].innerHTML);
	pics.push('</p></li>')}
this.$$('ul',box)[0].innerHTML=pics.join('');
	var ul=this.$$('ul',box),txt=this.$$('li',ul[2]),btn=this.$$('li',ul[3]),pic=this.$$('li',ul[0]);
	for(var i=0;
	i<c;
	i++){
	//初始化样式设置 this.$$('p',pic[i])[0].style.top=-i*h+'px';
	pic[i].style.height=h+'px';
	this.$$('p',pic[i])[0].style.height=boxH*c+'px';
}
var index = 0;
	//开始显示的序号 box.removeChild(this.$$('div',box)[0]);
	var run = function(idx){
	var tt=par.type==4?Math.round(1+(Math.random()*(3-1))):par.type;
	//效果选择 btn[index].className = '';
	txt[index].style.display='none';
	if(index==n-1) index=-1;
	var N=idx!=undefined?idx:index+1;
	var spd=tt==2?20:(tt==1?80:Math.round(20+(Math.random()*(80-20))));
	for(var i=0;
	i<c;
	i++){
	if(tt==3) spd=Math.round(20+(Math.random()*(80-20)));
	myFocus.move(myFocus.$$('p',pic[i])[0],'top',-N*c*h-i*h,'easeOut',spd);
	spd=tt==2?spd+10:(tt==1?spd-10:spd);
}
btn[N].className = 'current';
	txt[N].style.display='block';
	index = N;
}
run(index);
	var auto=setInterval(function(){
	run()}
,t);
	for (var j=0;
	j<n;
	j++){
	btn[j].j=j;
	btn[j].onclick=function(){
	if(!this.className) run(this.j)}
}
box.onmouseover=function(){
	clearInterval(auto);
}
box.onmouseout=function(){
	auto=setInterval(function(){
	run()}
,t);
}
for(var i=0,lk=this.$$('a',box),ln=lk.length;
	i<ln;
	i++) lk[i].onfocus=function(){
	this.blur();
}
//去除虚线框}
}
;
	myFocus.setting({
	style:'mF_liuzg',//style为风格样式， id:'myFocus',//焦点图ID chip:8,//图片切片数量，能被焦点图的高整除才有效，默认为8片 type:2,//切片效果，1为甩头，2为甩尾，3为凌乱，4为随机效果 time:4//每帧图片时间间隔}
);

CSS代码(index.css):

@charset "utf-8";/* CSS Document */
*{margin:0px;padding:0px;}
table{margin:0px;padding:0px;border:0px;}
dl，dd{border:none;}
img{border:none}
ul li{list-style-type:none}
body{width:auto;height:auto;margin:auto;font-family:"微软雅黑","lucinda grande","trebuchet ms","verdana","sans-serif";font-size:12px;color:#555555;background:#fff;}
/*banner部分*/
.mF_liuzg{position:relative;width:640px;height:370px;overflow:hidden;font:12px/1.5 Verdana,Geneva;background:#fff;margin:30px auto;}
.mF_liuzg .loading{position:absolute;z-index:9999;width:100%;height:370px;color:#fff;text-align:center;background:#2c2c2c;line-height:370px;vertical-align:middle;}
/*载入画面*/
.mF_liuzg .pic li{width:640px;position:relative;overflow:hidden;*margin-top:-2px;}
.mF_liuzg .pic li p{width:640px;position:absolute;}
.mF_liuzg .pic li p a{display:block;}
/*图片和焦点图框架一样大小*/
.mF_liuzg .pic li p img{width:640px;height:370px;}
.mF_liuzg .txt li{position:absolute;z-index:2;bottom:0;width:640px;height:36px;line-height:36px;overflow:hidden;display:none;}
.mF_liuzg .txt li a{display:block;color:#fff;padding:2px 0 0 16px;font-size:14px;font-weight:bold;text-decoration:none;}
/*标题样式*/
.mF_liuzg .txt-bg{position:absolute;bottom:0;z-index:1;width:640px;height:36px;overflow:hidden;background:#333;filter:alpha(opacity=60);opacity:0.6;left:1px;}
/*标题背景*/
.mF_liuzg .num{position:absolute;z-index:3;bottom:6px;right:8px;color:#333;}
/*按钮样式*/
.mF_liuzg .num li{float:left;width:22px;height:18px;position:relative;line-height:18px;text-align:center;margin-right:3px;cursor:pointer;background:#434343;filter:alpha(opacity=90);opacity:0.9;color:#fff;}
.mF_liuzg .num li.current,.mF_liuzg .num li.hover{background:#fe0072;color:#fff;font-weight:bold;height:20px;line-height:20px;top:-2px;}
/*banner部分*/

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