alimama首页6屏JS图片展示轮播滚动切换特效代码

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

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

以下是 alimama首页6屏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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为alimama首页6屏JS图片展示代码，属于站长常用代码" />
<title>alimama首页6屏JS图片展示代码</title>
<script src="js/alimama.js" type=text/javascript></script>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center" ><br />
<!-- 阿里妈妈首页焦点图代码_start -->
<div class=pb>
<ul class=banners id=promotion_banners>
  <li class=current id=banners_1_body_1><a href="#" target=_blank><img src="images/01.jpg"></a> </li>
  <li id=banners_2_body_1><a href="#" target=_blank><img src="images/02.jpg"></a> </li>
  <li id=banners_3_body_1><a href="#" target=_blank><img src="images/03.jpg"></a> </li>
  <li id=banners_4_body_1><a href="#" target=_blank><img src="images/04.jpg"></a> </li>
  <li id=banners_5_body_1><a href="#" target=_blank><img src="images/05.jpg"></a> </li>
  <li id=banners_6_body_1><a href="#" target=_blank><img src="images/06.jpg"></a> </li>
</ul>
<div class=switcher>
<ul class=points id=banners>
  <li class=current id=banners_1>1 </li>
  <li id=banners_2>2 </li>
  <li id=banners_3>3 </li>
  <li id=banners_4>4 </li>
  <li id=banners_5>5 </li>
  <li id=banners_6>6 </li></ul>
<div class=steps id=banners_sts>
<div class=up></div>
<div class=down></div></div></div>
<div class=clearing></div></div>
</div>
</body>
</html>

JS代码(alimama.js):

/************************************************************** ALIMAMA.COM! JavaScriptComponent BaseWritten by:limu(lenel@yahoo.cn)Important:to use this script don't remove these commentsVersion 1.0Created Date:2007-5-1Copyright:1997-2007 Alimama.Com All rights reserved.**************************************************************/
var $w = window;
	var $d = document;
	var $l = location;
	function $i(s){
	return $d.getElementById(s);
}
function $t(s){
	return $d.getElementsByTagName(s);
}
function $n(s){
	return $d.getElementsByName(s);
}
var _jsc ={
}
;
	if(!_jschome)var _jschome='http://www.lanrentuku.com/lanren/jscode/';
	_jsc.loaded = false;
	_jsc.client = (function(){
	var t ={
}
;
	var b = navigator.userAgent.toLowerCase();
	t.isOpera = (b.indexOf('opera') > -1);
	t.isIE = (!t.isOpera && b.indexOf('msie') > -1);
	t.isFF = (!t.isOpera &&!t.isIE&&b.indexOf('firefox') > -1);
	return t;
}
)();
	_jsc.util = (function(){
	var t ={
}
;
	t.addEvent = function(o,c,h){
	if(_jsc.client.isIE){
	o.attachEvent('on'+c,h);
}
else{
	o.addEventListener(c,h,false);
}
return true;
}
;
	return t;
}
)();
	_jsc.evt = (function(){
	var t ={
}
;
	t.gTar = function(oe){
	if(_jsc.client.isIE){
	return oe.srcElement;
}
else{
	return oe.target;
}
}
;
	return t;
}
)();
	// tab�л�function tabswitch(c,config){
	this.config = config ? config:{
	start_delay:3000,delay:1500}
;
	this.container = $i(c);
	this.pause = false;
	this.nexttb = 1;
	this.tabs = this.container.getElementsByTagName('dt');
	var _this = this;
	if(this.tabs.length<1)this.tabs = this.container.getElementsByTagName('li');
	for(var i = 0;
	i < this.tabs.length;
	i++){
	var _ec = this.tabs[i].getElementsByTagName('span');
	if(_ec.length<1)_ec = this.tabs[i].getElementsByTagName('a');
	if(_ec.length<1){
	_ec = this.tabs[i]}
else{
	_ec = _ec[0];
}
_ec.onmouseover = function(e){
	_this.pause = true;
	var ev = !e ? window.event:e;
	_this.start(ev,false,null);
}
;
	_ec.onmouseout = function(){
	_this.pause = false;
}
;
	try{
	$i(this.tabs[i].id + '_body_1').onmouseover = function(){
	_this.pause = true;
}
;
	$i(this.tabs[i].id + '_body_1').onmouseout = function(){
	_this.pause = false;
}
;
}
catch(e){
}
}
if ($i(c + '_sts')){
	var _sts = $i(c + '_sts');
	var _step = _sts.getElementsByTagName('li');
	if(_step.length<1)_step = _sts.getElementsByTagName('div');
	_step[0].onclick = function(){
	if (_this.tabs[_this.tabs.length-1].className.indexOf('current') > -1){
	_this.nexttb = _this.tabs.length + 1;
}
;
	_this.nexttb = _this.nexttb - 2 < 1 ? _this.tabs.length:_this.nexttb - 2;
	//alert(_this.nexttb);
	_this.start(null,null,_this.nexttb);
}
;
	_step[1].onclick = function(){
	_this.nexttb = _this.nexttb < 1 ? 1:_this.nexttb;
	_this.start(null,null,_this.nexttb);
}
;
}
;
	this.start = function(e,r,n){
	if(_this.pause && !e)return;
	if(r){
	curr_tab = $i(_this.container.id + '_' + rand(4));
}
else{
	if(n){
	//alert(_this.container.id + '_' + _this.nexttb);
	curr_tab = $i(_this.container.id + '_' + _this.nexttb);
}
else{
	curr_tab = _jsc.evt.gTar(e);
	if(curr_tab.id=="")curr_tab = curr_tab.parentNode;
}
}
var tb = curr_tab.id.split("_");
	for(var i = 0;
	i < _this.tabs.length;
	i++){
	if(_this.tabs[i]==curr_tab){
	_this.tabs[i].className="hot Selected current";
	try{
	//alert(_this.tabs[i].id);
	$i(_this.tabs[i].id + '_body_1').style.display = "block";
}
catch(e){
}
}
else{
	_this.tabs[i].className="";
	try{
	$i(_this.tabs[i].id + '_body_1').style.display = "none";
}
catch(e){
}
}
}
_this.nexttb = parseInt(tb[tb.length-1]) >= _this.tabs.length ? 1:parseInt(tb[tb.length-1]) + 1;
}
;
}
var banners,new_trans,super_rec,crazy_buy,star,bargain_scroll,buy_ok_div;
	var select_pr,select_pc,select_cpk;
	_jsc.util.addEvent(window,'load',function(){
	if ($i('banners')){
	banners = new tabswitch('banners',{
}
);
	setInterval("banners.start(null,null,1);
	",6000);
}
}
);

CSS代码(css.css):

BODY{FONT-SIZE:12px;}
img{border:0px}
ul,li{margin:0;padding:0;}
.pb{WIDTH:401px;}
.pb .steps{BACKGROUND:url(../images/index_neck_shoulders.png) no-repeat left top}
.pb .points LI{BACKGROUND:url(../images/index_neck_shoulders.png) no-repeat left top}
.pb .switcher{BACKGROUND:url(../images/index_neck_shoulders.png) no-repeat left top}
.pb .banners{FLOAT:left;width:377px;height:139px;}
.pb .banners LI{DISPLAY:none;OVERFLOW:hidden;WIDTH:377px;HEIGHT:139px}
.pb .banners LI.current{DISPLAY:block}
.pb .switcher{BACKGROUND-POSITION:left -76px;FLOAT:right;WIDTH:24px;HEIGHT:139px;text-align:center;}
.pb .points{MARGIN:8px auto 0px;WIDTH:19px;FONT-FAMILY:Arial}
.pb .points LI{BACKGROUND-POSITION:-26px -76px;MARGIN:0px 0px 2px 3px;OVERFLOW:hidden;WIDTH:16px;CURSOR:pointer;COLOR:#fff;LINE-HEIGHT:15px;FONT-FAMILY:Arial;HEIGHT:15px;TEXT-ALIGN:center}
.pb .points LI.current{BACKGROUND-POSITION:-45px -76px;MARGIN-LEFT:0px;WIDTH:19px;TEXT-INDENT:3px;TEXT-ALIGN:center}
.pb .steps{BACKGROUND-POSITION:-26px -93px;MARGIN:0px 0px 0px 3px;WIDTH:16px;BOTTOM:3px;FLOAT:left;HEIGHT:23px;_overflow:hidden;}
.pb .steps .up{WIDTH:15px;CURSOR:pointer;HEIGHT:11px}
.pb .steps .down{WIDTH:15px;CURSOR:pointer;HEIGHT:11px}

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