淘宝首页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=gb2312">
<title>仿淘宝首页banner焦点幻灯轮播代码</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/myjs.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="box">
	<ul id="list">
		<li><a href="#"><img src="images/01.jpg" /></a></li>
		<li><a href="#"><img src="images/02.jpg" /></a></li>
		<li><a href="#"><img src="images/03.jpg" /></a></li>
		<li><a href="#"><img src="images/04.png" /></a></li>
		<li><a href="#"><img src="images/05.jpg" /></a></li>
	</ul>
	<ul id="num">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>
</body>
</html>

JS代码(common.js):

/* Design by Jason.leung,QQ,147430218,新浪微博,@切片麵包,Email,jason.leung58@icloud.com */
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);
}
}

JS代码(myjs.js):

/*********************************Design by Jason.leung,QQ,147430218新浪微博,@切片麵包Email,jason.leung58@icloud.com*********************************/
window.onload=function(){
	var dealy=3000;
	//3秒滾動一张圖片，可自行修改var oBox=document.getElementById('box');
	var aList=document.getElementById('list');
	var aNum=document.getElementById('num').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='active';
	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();
}
}

CSS代码(style.css):

/*********************************Design by Jason.leung,QQ,147430218新浪微博,@切片麵包Email,jason.leung58@icloud.com*********************************/
/* 酷站代码整理 转载请注明出处 http://www.5icool.org */
*{margin:0px;padding:0px;list-style:none;}
#box{width:490px;height:170px;background:#fff;margin:50px auto;position:relative;overflow:hidden;z-index:5000;}
#list{position:absolute;left:0;top:0;}
#list li{width:490px;height:170px;cursor:pointer;}
#num{position:absolute;right:10px;bottom:10px;}
#num 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;}
.active{background:#ff6600;}
span{display:block;width:auto;text-align:center;color:red;font-size:14px;font-family:'Arial';}
#foot_bm a,p,p a{font-size:12px;color:#666;}

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