仿拍拍首页产品图片轮换显示效果

稿源：互联网 2022-07-12 12:24:39 点击： 5896 撤稿纠错

拍拍首页产品图片轮换显示特效，兼容主流浏览器，商城系统常用网页特效。

以下讨论的是和相关的仿拍拍首页产品图片轮换显示效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" lang="zh-CN">
<head>

<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />

<title>仿拍拍首页产品图片随机轮显切换效果，sky整理收集，站长特效网欢迎您。</title>
<style>
body {font-size:12px}
img {border:0px}
#sale{right:206px;top:0;width:260px;background:#fff}
#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("/img/saleTitle_zzjs3.gif") no-repeat}
#saleList{margin-top:5px}
#saleList .saleTwo{height:108px;background:url("/img/sale_zzjs1.gif") bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}
#saleList a.saleItem{background:url("/img/salezzjs_2.gif") right repeat-y;}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
</style>
<script type="text/javascript">
rnd.today=new Date();
rnd.seed=rnd.today.getTime();
function rnd(){
	rnd.seed = (rnd.seed*9301+49297) % 233280;
	return rnd.seed/(233280.0);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function rand(number){
	return Math.ceil(rnd()*number)-1;
}
function nextSale(order){
	if(order=="up")	saleNum--;
	else saleNum++;
	if(saleNum>2) saleNum=0
	else if(saleNum<0) saleNum=2;
	//alert(saleNum);
	for(i=0;i<3;i++)
		document.getElementById("saleList"+i).style.display="none";
	    document.getElementById("saleList"+saleNum).style.display="";
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="sale" class="absolute overflow">
	<div id="saleTitle" class="absolute">
		<a href="javascript:nextSale('up')" title="点击到上一屏">
		<img src="/img/saleFore_zzjs4.gif" hspace="4" onmouseover="this.src='/img/saleNextOver_zzjs5.gif'" onmouseout="this.src='saleFore_zzjs4.gif'" /></a><a href="javascript:nextSale('down')" title="点击到下一屏"><img src="/img/saleNext_zzjs6.gif" onmouseover="this.src='/img/saleNextOver_zzjs5.gif'" onmouseout="this.src='/img/saleNext_zzjs6.gif'" /></a></div>
	<div class="overflow" style="height:330px" id="saleList">
		<script type="text/javascript">var saleNum=rand(3);</script>
		<div id="saleList0" style="display:none">
			<div class="saleTwo">
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="圣诞浪漫饰品超级大促" src="http://pics.paipai.com/update/20071213/lady_ss001.jpg" width="65" height="65" /></div>
				<div>
					圣诞浪漫饰品

超级大促</div>
				</a>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="摄像头集结号给你新的感觉" src="http://pics.paipai.com/update/20071220/index_digital-1.jpg" width="65" height="65" /></div>
				<div>
					摄像头集结号

给你新的感觉</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>
				<div>
					好感度提升

韩版娃娃装</div>
				</a></div>
			<div class="saleTwo">
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="复古牛仔外套特惠119元起" src="http://pics.paipai.com/update/20071211/index_nz.jpg" width="65" height="65" /></div>
				<div>
					复古牛仔外套

特惠119元起</div>
				</a>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="圣诞拍拍特供运动服3折" src="http://pics.paipai.com/update/20071213/index_idnex5-1.jpg" width="65" height="65" /></div>
				<div>
					圣诞拍拍特供

运动服3折</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="摄像头集结号给你新的感觉" src="http://pics.paipai.com/update/20071220/index_digital-1.jpg" width="65" height="65" /></div>
				<div>
					摄像头集结号

给你新的感觉</div>
				</a></div>
			<div>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="圣诞拍拍特供电脑周边4折" src="http://pics.paipai.com/update/20071220/index_digital-2.jpg" width="65" height="65" /></div>
				<div>
					圣诞拍拍特供

电脑周边4折</div>
				</a>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="party扮靓甜美腮红" src="http://pics.paipai.com/update/20071213/lady_ss002.jpg" width="65" width="65" height="65" /></div>
				<div>
					party扮靓

甜美腮红</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>
				<div>
					好感度提升

韩版娃娃装</div>
				</a></div>
		</div>
		<div id="saleList1" style="display:none">
			<div class="saleTwo">
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="新奇好玩便宜尽在网游频道" src="http://pics.paipai.com/update/20071123/game_ad_02.jpg" width="65" height="65" /></div>
				<div>
					新奇好玩便宜

尽在网游频道</div>
				</a>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="展现高贵气质骑士系马靴" src="http://pics.paipai.com/update/20071220/lady_003.jpg" width="65" height="65" /></div>
				<div>
					展现高贵气质

骑士系马靴</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="摄像头集结号给你新的感觉" src="http://pics.paipai.com/update/20071220/index_digital-1.jpg" width="65" height="65" /></div>
				<div>
					摄像头集结号

给你新的感觉</div>
				</a></div>
			<div class="saleTwo">
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="永不过时条纹毛衣" src="http://pics.paipai.com/update/20071206/lady_65_65_20.jpg" width="65" height="65" /></div>
				<div>
					永不过时

条纹毛衣</div>
				</a>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="圣诞拍拍特供运动鞋2折" src="http://pics.paipai.com/update/20071213/index_index-4.jpg" width="65" height="65" /></div>
				<div>
					圣诞拍拍特供

运动鞋2折</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>
				<div>
					好感度提升

韩版娃娃装</div>
				</a></div>
			<div>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="精简唯美索爱K630" src="http://pics.paipai.com/update/20071224/digital_K630.jpg" width="65" height="65" /></div>
				<div>
					精简唯美

索爱K630</div>
				</a>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="原装瑞士军刀精选" src="http://pics.paipai.com/update/20071203/index_jd.jpg" width="65" width="65" height="65" /></div>
				<div>
					原装瑞士军刀

精选</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="超薄机身索爱W880" src="http://pics.paipai.com/update/20071207/digital_W880.jpg" width="65" height="65" /></div>
				<div>
					超薄机身

索爱W880</div>
				</a></div>
		</div>
		<div id="saleList2" style="display:none">
			<div class="saleTwo">
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="各就各味秋冬饮食计划" src="http://image.paipai.com/cgi-bin/showimg?uin=476363000&filename=1C64B8F8-470D9864F8B8641C0000000000783598011CC2EA.jpg&type=3" width="65" height="65" /></div>
				<div>
					各就各味

秋冬饮食计划</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>
				<div>
					好感度提升

韩版娃娃装</div>
				</a></div>
			<div class="saleTwo">
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="圣诞拍拍特供随身视听5折" src="http://pics.paipai.com/update/20071220/index_digital-3.jpg" width="65" height="65" /></div>
				<div>
					圣诞拍拍特供

随身视听5折</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="超薄机身索爱W880" src="http://pics.paipai.com/update/20071207/digital_W880.jpg" width="65" height="65" /></div>
				<div>
					超薄机身

索爱W880</div>
				</a></div>
			<div>
				<a class="saleItem" href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="我爱我家家居大抢购" src="http://pics.paipai.com/update/20071206/index_jiaj2.jpg" width="65" height="65" /></div>
				<div>
					我爱我家

家居大抢购</div>
				</a><a href="http://www.zzjs.net" target="_blank">
				<div>
					<img alt="超值彩妆套装变身派对女王" src="http://pics.paipai.com/update/20071213/lady_ss003.jpg" width="65" width="65" height="65" /></div>
				<div>
					超值彩妆套装

变身派对女王</div>
				</a></div>
		</div>
	</div>
</div>
<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display="";</script>

国内最全的网页特效尽在<a href="<#ZC_BLOG_HOST#>">站长特效网</a>

</body>
</html>

关于仿拍拍首页产品图片轮换显示效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016372563097.shtml方便下次再访问哦。

·上一篇： 图片无间断向左滚动
·下一篇： 通过鼠标滚轮来改变图片大小效果

仿拍拍首页产品图片轮换显示效果

文章分类LIST >>返回首页

最新游戏

最新新闻