仿淘宝首页banner焦点幻灯轮播代码无JQ,无通用样式

大鸟，飞起来 · 发表于 2014-1-13 11:33:47

主调用代码

<!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=gb2312">
<title>仿淘宝首页banner焦点幻灯轮播代码</title>
<link rel="stylesheet" type="text/css" href="plus/cpppt/cpppt.css" />
<script type="text/javascript" src="plus/cpppt/cpppt.js"></script>
</head>
<div id="cppptbox">
<ul id="cppptlist">
<li><a href="#" target="_blank"><img src="plus/cpppt/01.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="plus/cpppt/02.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="plus/cpppt/03.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="plus/cpppt/04.png" /></a></li>
<li><a href="#" target="_blank"><img src="plus/cpppt/05.jpg" /></a></li>
</ul>
<ul id="cppptnum">
<li class="cppptactive">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>

复制代码

样式表文件cpppt.css

#cppptbox {width:490px; height:170px; background:#fff; margin:50px auto; position: relative; overflow: hidden;z-index:5000;}
#cppptlist {position:absolute; left:0; top:0;margin:0; padding:0;}
#cppptlist li {width:490px; height:170px; cursor: pointer; list-style: none;}
#cppptlist img {border:0;}
#cppptnum {position: absolute; right:10px; bottom:10px;margin:0; padding:0;}
#cppptnum li {width:16px; height:16px; float:left; margin-right:2px; color:#fff; cursor: pointer; font-size: 12px; font-family:'Arial'; line-height:16px; text-align: center; border:1px solid #fff;list-style: none;}
.cppptactive {background:#ff6600;}

复制代码

脚本文件cpppt.js

window.onload=function()
{
var dealy=3000; //time=3000ms
var oBox=document.getElementById('cppptbox');
var aList=document.getElementById('cppptlist');
var aNum=document.getElementById('cppptnum').getElementsByTagName('li');
var timer=null;
var now=0;
info();
for (var i=0; i<aNum.length; i++)
{
aNum[i].index=i;
aNum[i].onmouseover=function()
{
now=this.index;
play(Running);
}
}
function play(fn)
{
for (var i=0; i<aNum.length; i++)
{
aNum[i].className='';
}
aNum[now].className='cppptactive';
fn(aList,{top:-170*now});
}
function auto()
{
clearInterval(timer);
timer=setInterval(function()
{
now++;
if(now==aNum.length)
{
now=0;
}
play(Flexing);
}, dealy);
}
auto();
oBox.onmouseover=function()
{
clearInterval(timer);
}
oBox.onmouseout=function()
{
auto();
}
}
//common
function getClass(oParent,sClass)
{
var value=[];
var Ele=oParent.getElementsByTagName('*');
for (var i=0; i<Ele.length; i++)
{
var aClass=Ele[i].className.split(' ');
for (n=0; n<aClass.length; n++)
{
if (aClass[n]==sClass)
{
value.push(Ele[i]);
}
}
}
return value;
}
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function setCSS3(obj,name,value)
{
obj.style['webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style[name]=value;
}
function rnd(n)
{
return Math.random()*2*n-n;
}
function Running(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var now=0;
var bStop=true;
for (var attr in json)
{
if(attr=='opacity')
{
now=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
now=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-now)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(now!=json[attr])bStop=false;
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+now+speed+')';
obj.style.opacity=(now+speed)/100;
}
else
{
obj.style[attr]=speed+now+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
}, 30);
}
function Flexing(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var now=0;
var bStop=true;
for (var attr in json)
{
if(!obj.speed)obj.speed={};
if(!obj.speed[attr])obj.speed[attr]=0;
now=parseInt(getStyle(obj,attr));
if(Math.abs(json[attr]-now)>1 || Math.abs(obj.speed[attr])>1)
{
bStop=false;
obj.speed[attr]+=(json[attr]-now)/5;
obj.speed[attr]*=0.85;
var MaxSpeed=50;
if(Math.abs(obj.speed[attr])>MaxSpeed)
{
obj.speed[attr]=obj.speed[attr]>0?MaxSpeed:-MaxSpeed;
}
obj.style[attr]=now+obj.speed[attr]+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
obj.style[attr]=json[attr]+'px';
if(fnEnd)fnEnd();
}
}, 30);
}
function convertStyle(obj)
{
for (var i=0; i<obj.length; i++)
{
obj[i].style.left=obj[i].offsetLeft+'px';
obj[i].style.top=obj[i].offsetTop+'px';
}
for (var i=0; i<obj.length; i++)
{
obj[i].style.position='absolute';
obj[i].style.margin=0;
}
}
function info()
{
var aLink=document.createElement('a');
var myinfo="";
aLink.innerHTML=myinfo;
aLink.onmouseover=function()
{
aLink.style.textDecoration='underline';
}
aLink.onmouseout=function()
{
aLink.style.textDecoration='none';
}
document.body.appendChild(aLink);
}
function create(oParent,Ele,num,sClass)
{
var value=[];
var Element=0;
for (var i=0; i<num; i++)
{
Element=document.createElement(Ele);
oParent.appendChild(Element);
if(sClass)Element.className=sClass;
value.push(Element);
}
return value;
}
function rndColor()
{
var str=Math.ceil(Math.random()*0xFFFFFF).toString(16);
for (var i=0; i<str.length; i++)
{
if(str.length<6)
{
str='0'+str;
}
}
return str;
}
function shake(obj)
{
var posData=[obj.offsetLeft,obj.offsetTop];
obj.onclick=function()
{
var i=0;
clearInterval(timer);
var timer=setInterval(function()
{
i++;
obj.style.left=posData[0]+((i%2)>0?-2:2)+'px';
obj.style.top=posData[1]+((i%2)>0?-2:2)+'px';
if(i>=30)
{
clearInterval(timer);
obj.style.left=posData[0]+'px';
obj.style.top=posData[1]+'px';
}
}, 30);
}
}

复制代码

账号		自动登录	找回密码
密码			入学

仿淘宝首页banner焦点幻灯轮播代码无JQ,无通用样式

本帖子中包含更多资源

浏览过的版块