经验分享程序开发文档资料数据资源其它资源

家乐福多图三屏切换代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 家乐福多图三屏切换代码 的示例演示效果:

当前平台(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="此代码内容为家乐福多图三屏切换代码，属于站长常用代码" />
<title>家乐福多图三屏切换代码</title>
<LINK media=all href="css/css.css" type=text/css rel=stylesheet>
<script src="js/jquery-1.2.6.min.js" type=text/javascript></script>
<script src="js/163css.js" type=text/javascript></script>
</head>
<body style="text-align:center">
<div class="box" id=sales-product>
	<div class=module-title>
		<H3>促销产品</H3>
	</div>
	<div class="js j_index_carouseProduct" id=sales-product-main>
      <ul>
        <li class=order1><a class="a1" href="#" target="_blank"><img alt="标题" src="images/k10211650.jpg" /></a>
            <p><a  href="#" target="_blank">三得利维体运动饮料<br />
              促销价<span 
		  class=price_symbol>￥</span><span class=price_num>0.</span><span class=price_change>00</span></a></p>
        </li>
        <li><a class="a1" href="#" target="_blank"><img alt="标题" src="images/k31434009.jpg" /></a>
            <p><a  href="#" target="_blank">坚尔美加厚保鲜袋<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>1.</span><span class=price_change>90</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/k41500067.jpg" /></a>
            <p><a  href="#" target="_blank">华生 KYT33-25D转页扇<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>39.</span><span class=price_change>00</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/2790687.jpg" /></a>
            <p><a  href="#" target="_blank">男女凉席拖鞋<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>3.</span><span class=price_change>90</span></a></p>
        </li>
        <li class=order2><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/k15060005.jpg" /></a>
            <p><a  href="#" target="_blank">光明莫斯利安酸牛奶(原味)<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>0.</span><span class=price_change>00</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/lanrentuku.jpg" /></a>
            <p><a href="#" target="_blank">坚尔美加厚保鲜袋<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>1.</span><span class=price_change>90</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/k41230011.jpg" /></a>
            <p><a href="#" target="_blank">奔腾PY-R651饮水机<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>95.</span><span class=price_change>00</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/2790652.jpg" /></a>
            <p><a title=男女凉席拖鞋 href="#" target="_blank">男女凉席拖鞋<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>3.</span><span class=price_change>90</span></a></p>
        </li>
        <li class=order3><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/k11121137.jpg" /></a>
            <p><a  href="#" target="_blank">蓝月亮衣物消毒液<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>0.</span><span class=price_change>00</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/k31434049.jpg" /></a>
            <p><a  href="#" target="_blank">坚尔美加厚保鲜袋<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>1.</span><span class=price_change>90</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/2565145.jpg" /></a>
            <p><a  href="#" target="_blank">飞利浦剃须刀HQ130<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>98.</span><span class=price_change>00</span></a></p>
        </li>
        <li><a class="a1"  href="#" target="_blank"><img alt="标题" src="images/2790554.jpg" /></a>
            <p><a  href="#" target="_blank">懒人 图库<br />
              促销价<span class=price_symbol>￥</span><span class=price_num>3.</span><span class=price_change>90</span></a></p>
        </li>
      </ul>
  </div>
</div>
</body>
</html>

JS代码(163css.js):

function overall(root){
	var root = root || document;
	var re = /j_([\w_]+)/;
	var funcs ={
}
;
	$(".js",root).each(function(i){
	var m = re.exec(this.className);
	if (m){
	var f = funcs[m[1]];
	if (!f){
	f = eval('CF.' + m[1].replace(/\_/gi,'.'));
	funcs[m[1]] = f;
}
f && f(this);
}
}
);
}
var CF = new Object();
	CF.common ={
	//tabs切换 tabs:function(obj){
	$('>ul',obj).tabs();
}
,//下拉菜单 dropMenu:function(obj){
	$('li',obj).hover(function(){
	$('ul',this).fadeIn();
}
,function(){
	$('ul',this).hide();
}
);
}
,productSaleClick:function(obj){
	var next = $(obj).parent().next();
	$(obj).click(function(){
	next.show();
	CF.common.productSale(next);
	return false;
}
);
	$('#product-sale-close').click(function(){
	next.hide();
}
);
}
,productSale:function(obj){
	$('dd:eq(0)>ul>li',obj).hover(function(){
	$(this).addClass('current');
}
,function(){
	$(this).removeClass('current');
}
);
}
,//插入圆角 corner:function(obj){
	if ($.browser.msie && $.browser.version == '6.0'){
	var obj = $(obj);
	var height = obj.height();
	var outerHeight = obj.outerHeight();
	if (outerHeight % 2 != 0){
	obj.height(height + 1);
}
}
$('<div class="cornerLT"></div><div class="cornerRT"></div><div class="cornerLB"></div><div class="cornerRB"></div>').appendTo(obj);
}
,//用户面板显隐 userPannel:{
	insertIframe:function(){
	if ($.browser.msie && $.browser.version == '6.0'){
	var sIframe = '<iframe width="100%" height="100%" frameborder="0"></iframe>';
	$('#userPannel').append(sIframe);
	$('#userPannel-pop .module-popBox').append('<iframe frameborder="0"></iframe>');
}
}
,showPrompt:function(elem){
	var obj = $(elem);
	obj.show();
	$('a.close',obj).click(function(){
	$(obj).hide();
	if (elem == "#userPannel-prompt") SetIeCookie('userpannel','close');
	if (elem == "#userPannel-userInfo")SetIeCookie('userInfo','close');
	return false}
);
}
,click:function(obj){
	var obj = $(obj);
	var href = obj.attr('href').toString().match(/#(.*)/)[1];
	var popId = $('#' + href);
	obj.click(function(){
	popId.show() return false;
}
);
	$('a.close',popId).click(function(){
	popId.hide();
	return false}
);
}
,//mouseover hover:function(obj){
	var obj = $(obj);
	var href = obj.attr('href').toString().match(/#(.*)/)[1];
	var popId = $('#' + href);
	obj.hover(function(){
	popId.show();
}
,function(){
	popId.hide();
}
);
}
,//pop mouseover popHover:function(obj){
	$('div[id][id!="userPannel-prompt"][id!="userPannel-userInfo"][id!="userPannel-userLogin"]',obj).hover(function(){
	$(this).show();
}
,function(){
	$(this).hide();
}
);
}
}
,//hover行变色(公用) lineHoverColor:function(obj){
	$(obj).children().hover(function(){
	$(this).addClass('current');
}
,function(){
	$(this).removeClass('current');
}
);
}
,lineHoverCurrent:function(obj){
	$(obj).children().click(function(){
	$(this).parent().find('.current').removeClass();
	$(this).addClass('current');
}
);
}
}
//首页CF.index ={
	//促销产品跑马灯carouseProduct:function(obj){
	var obj = $(obj);
	var prevChild = obj.prev();
	var visible = 4;
	var liNums = $('li',obj).length;
	var pageNum = Math.ceil( liNums/visible );
	var pageStr = '';
	prevChild.append('<ul class="jcarouseLiteNav"></ul>');
	var jcarouseLiteNav = $('>ul.jcarouseLiteNav',prevChild);
	for(var i = 0;
	i < pageNum;
	i++){
	pageStr += '<li><a class="' + (i + 1) + '"><span>' + (i + 1) + '</span></a></li>';
}
jcarouseLiteNav.prepend('<li class="prev"><a><span>previous</span></a></li>' + pageStr + ' <li class="next"><a><span>next</span></a></li>');
	$('>li .1',jcarouseLiteNav).parent().addClass('current');
	if(liNums <=visible){
	jcarouseLiteNav.hide();
}
obj.jCarouselLite({
	btnNext:$('>li.next ',jcarouseLiteNav),btnPrev:$('>li.prev a',jcarouseLiteNav),visible:visible,scroll:visible,speed:1000,afterEnd:function(a){
	$('>li.current',jcarouseLiteNav).removeClass('current');
	var currLI = $(a[0]).attr("class").split('order')[1];
	$('>li:eq(' + currLI + ')',jcarouseLiteNav).addClass('current');
}
,btnGo:$('>li:not([class*=previous]):not([class*=next]) a',jcarouseLiteNav)}
)var width = obj.width();
	obj.width( width - 3 );
}
,//最新卖场和省心生活跑马灯carouseOther:function(obj){
	var obj = $(obj);
	var prevChild = obj.prev();
	var pageNum = 3;
	var pageStr = '';
	prevChild.append('<ul class="jcarouseLiteNav"></ul>');
	var jcarouseLiteNav = $('>ul.jcarouseLiteNav',prevChild);
	for(var i = 0;
	i < pageNum;
	i++){
	pageStr += '<li><a class="' + (i + 1) + '"><span>' + (i + 1) + '</span></a></li>';
}
jcarouseLiteNav.prepend('<li class="prev"><a><span>previous</span></a></li>' + pageStr + ' <li class="next"><a><span>next</span></a></li>');
	$('>li .1',jcarouseLiteNav).parent().addClass('current');
	obj.jCarouselLite({
	btnNext:$('>li.next ',jcarouseLiteNav),btnPrev:$('>li.prev a',jcarouseLiteNav),visible:1,scroll:1,speed:1000,afterEnd:function(a){
	$('>li.current',jcarouseLiteNav).removeClass('current');
	var currLI = $(a[0]).attr("class").split('order')[1];
	$('>li:eq(' + currLI + ')',jcarouseLiteNav).addClass('current');
}
,btnGo:$('>li:not([class*=previous]):not([class*=next]) a',jcarouseLiteNav)}
)}
}
CF.other ={
	picChange:function(obj){
	$(obj).before('<div id="project-pic-nav">').find('ul').cycle({
	fx:'fade',timeout:3000,next:obj,pager:'#project-pic-nav',pageEvent:null}
)}
}
function GetCookie(name){
	var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;
	]*)(;
	|$)"));
	if(arr != null) return unescape(arr[2]);
	return null;
}
//写cookies函数function SetIeCookie(name,value)//两个参数，一个是cookie的名子，一个是值{
	document.cookie = name + "="+ escape (value) + ";
	path=/;
	";
}
function SetuserPannel(){
	var cookie = GetCookie('userpannel');
	if(cookie != 'close'){
	CF.common.userPannel.showPrompt('#userPannel-prompt');
}
}
function SetuserUserInfoPannel(){
	var cookie = GetCookie('userInfo');
	if (cookie != 'close'){
	CF.common.userPannel.showPrompt('#userPannel-userInfo');
}
}
$(function(){
	overall();
	SetuserPannel();
	SetuserUserInfoPannel();
}
)

CSS代码(css.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
p{line-height:24px}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
#container{width:1000px;text-align:left;margin:0 auto;color:#9be3fc;}
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11;}
.box{margin:20px auto;}
.module-title{BACKGROUND:url(../images/index_spirit_title.gif) no-repeat -9999px 50%;POSITION:relative;HEIGHT:35px}
.module-title H3{BACKGROUND:url(../images/heading_left.png) no-repeat;TEXT-INDENT:-9999px}
.module-title UL{RIGHT:10px;WIDTH:135px;POSITION:absolute;TOP:8px}
.module-title LI{FLOAT:left;MARGIN:4px 9px 0px 0px;WIDTH:12px;HEIGHT:12px}
.module-title LI.prev{MARGIN:0px 12px 0px 0px;WIDTH:20px;HEIGHT:20px}
.module-title LI.next{MARGIN:0px 12px 0px 0px;WIDTH:20px;HEIGHT:20px}
.module-title LI A{DISPLAY:block;BACKGROUND:url(../images/module-title-nav-bg.gif) no-repeat -9999px 50%;OVERFLOW:hidden;WIDTH:100%;CURSOR:pointer;COLOR:#ffffff;TEXT-INDENT:-9999px;HEIGHT:100%}
#sales-product .module-title LI.prev A{BACKGROUND-POSITION:0px 0px;HEIGHT:20px}
#sales-product .module-title LI.next A{BACKGROUND-POSITION:-98px 0px;HEIGHT:20px}
#sales-product .module-title LI A{BACKGROUND-POSITION:-35px -4px}
#sales-product .module-title LI.current A{BACKGROUND-POSITION:-56px -4px}
#new-market .module-title LI.prev A{BACKGROUND-POSITION:0px -20px;HEIGHT:20px}
#new-market .module-title LI.next A{BACKGROUND-POSITION:-98px -20px;HEIGHT:20px}
#new-market .module-title LI A{BACKGROUND-POSITION:-35px -24px}
#new-market .module-title LI.current A{BACKGROUND-POSITION:-56px -24px}
#saving-life .module-title LI.prev A{BACKGROUND-POSITION:0px -40px;HEIGHT:20px}
#saving-life .module-title LI.next A{BACKGROUND-POSITION:-98px -40px;HEIGHT:20px}
#saving-life .module-title LI A{BACKGROUND-POSITION:-35px -44px}
#saving-life .module-title LI.current A{BACKGROUND-POSITION:-56px -44px}
#sales-product .module-title{BACKGROUND-POSITION:0px 0px}
.sales-dm#sales-product .module-title{BACKGROUND-POSITION:0px -180px}
#sales-dm .module-title{BACKGROUND-POSITION:0px -36px}
#new-market .module-title{BACKGROUND-POSITION:0px -72px}
#saving-life .module-title{BACKGROUND-POSITION:0px -108px}
#function-tools .module-title{BACKGROUND-POSITION:0px -144px}
#sales-product{CLEAR:both;BACKGROUND:url(../images/index_product_bg.gif) no-repeat;PADDING-BOTTOM:39px;MARGIN:20px auto;WIDTH:949px;_zoom:1}
#corner-product-main{Z-INDEX:1000;BACKGROUND:url(../images/product-pic-bottom.gif) no-repeat;MARGIN:0px 0px 0px -13px;OVERFLOW:hidden;WIDTH:975px;POSITION:absolute;HEIGHT:40px}
#sales-product-main{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;OVERFLOW:hidden;WIDTH:948px;PADDING-TOP:9px;POSITION:relative}
#sales-product-main UL{WIDTH:4000px}
#sales-product-main LI{BORDER-RIGHT:#e2e2e2 1px solid;FLOAT:left;WIDTH:237px;HEIGHT:258px}
#sales-product-main LI IMG{DISPLAY:block;MARGIN:0px auto}
#sales-product-main LI{FONT-SIZE:14px;COLOR:#bf2833}
#sales-product-main LI A{FONT-SIZE:14px;COLOR:#bf2833}
#sales-product-main LI P{PADDING-RIGHT:0px;PADDING-LEFT:15px;PADDING-BOTTOM:0px;PADDING-TOP:10px;TEXT-ALIGN:left}
#sales-product-main LI P A{DISPLAY:block;WIDTH:208px}
#sales-product-main LI SPAN{FONT-SIZE:35px;COLOR:#bf2833;LINE-HEIGHT:35px;FONT-FAMILY:Arial,''}
#sales-product-main LI A.a1{DISPLAY:block;MARGIN:0px auto;VERTICAL-ALIGN:middle;WIDTH:187px;HEIGHT:178px;TEXT-ALIGN:center}
#sales-product-main LI A.sales-product-pic SPAN{DISPLAY:inline-block;VERTICAL-ALIGN:middle;WIDTH:0px}
#sales-product-main LI SPAN.price_symbol{FONT-SIZE:23px;LINE-HEIGHT:20px}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
257.76 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
257.76 KB
立即下载
古璧飘
了解
打赏作者 鼓励作者
Html JS 图片特效6
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章