地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置:
网站首页
>
特效代码
>
网页图片特效
> 正文:
[荐] 仿eBay产品图片幻灯切换效果
网页图片特效
[荐] 仿eBay产品图片幻灯切换效果
日期:2011-12-19 21:32:00 标签:
图片特效
图片切换
切换效果
幻灯片
css
js特效
∷
PC蛋蛋 赚积分 换Q币!>>>更多礼品兑换
<!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> <title>仿eBay产品图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> body{font-size:12px;font-family:arial,helvetica,sans-serif;;} #carousel .frame{width:500px;position:relative;height:310px;overflow:hidden;margin:30px auto 0 auto;;} #carousel .frames{width:2920px;position:relative;height:310px;} #carousel .frame-2{left:715px;overflow:hidden;width:715px;position:absolute;height:310px;} #carousel .frame-3{left:1460px;overflow:hidden;width:715px;position:absolute;height:310px;} #carousel .frame-4{left:2190px;overflow:hidden;width:715px;position:absolute;height:310px;} #carousel .frame-5{left:2920px;overflow:hidden;width:715px;position:absolute;height:310px;} #carousel .controls{display:block; width:105px;cursor:hand;bottom:0px;padding-top:2px;margin:0 auto;height:20px;} #carousel .overlay{border-right:#ededed 5px solid;border-top:#ededed 5px solid;display:none;filter:alpha(opacity=90);border-left:#ededed 5px solid;width:188px;cursor:hand;border-bottom:#ededed 5px solid;position:absolute;height:118px;background-color:#fff;opacity:.9;} #carousel .two-overlay{height:141px;} #carousel .olines{height:122px;} #carousel .two-olines{height:142px;} #carousel .sdw{border-right:#666 2px solid;border-top:#666 0px solid;display:block;left:-5px;border-left:#666 0px solid;width:196px;border-bottom:#666 2px solid;position:absolute;top:-5px;height:127px;opacity:.8;} #carousel .two-sdw{height:151px;} #carousel .slines{height:126px;} #carousel .two-slines{height:149px;} #carousel .details{padding-right:17px;display:block;padding-left:17px;padding-bottom:17px;font:12px arial;width:163px;padding-top:17px;height:93px;} #carousel .dlines{height:97px;} #carousel .two-dlines{height:137px;} #carousel .title{padding-bottom:8px;font:bold 15px "trebuchet ms";border-bottom:#ccc 1px solid;} #carousel .pricemsg{padding-bottom:1px;color:#333;padding-top:4px;} #carousel .price{font:bold 15px arial;} #carousel .legal{font:11px arial;color:#666;} #carousel .terms{float:right;width:80px;} #carousel .content{padding-right:10px;display:none;padding-left:10px;filter:alpha(opacity=80);padding-bottom:5px;width:695px;padding-top:5px;position:absolute;top:258px;background-color:#fff;text-align:justify;opacity:.8;} #carousel .double-des{padding-bottom:12px;} #carousel .des{color:#1161b7;padding-top:12px;} #carousel .selected{float:left;font:17px "trebuchet ms";margin-left:4px;width:16px;color:#8f8f8f;position:relative;height:15px;} #carousel .off{float:left;font:17px "trebuchet ms";margin-left:4px;width:16px;color:#dadada;position:relative;height:15px;} #carousel .on{float:left;font:17px "trebuchet ms";margin-left:4px;width:16px;color:#1162b7;position:relative;height:15px;} #carousel .arrow{float:left;width:12px;height:20px;} #carousel .l-a{background:url(/html/txdm_2/images/20100903/sprfilmstriparrows.gif) no-repeat 0px -22px;} #carousel .l-h{background:url(/html/txdm_2/images/20100903/sprfilmstriparrows.gif) no-repeat 0px -47px;} #carousel .r-a{background:url(/html/txdm_2/images/20100903/sprfilmstriparrows.gif) no-repeat 0px -97px;} #carousel .r-h{background:url(/html/txdm_2/images/20100903/sprfilmstriparrows.gif) no-repeat 0px -122px;} </style> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="carousel"> <div class="frame"> <div class="frames" id="stage"> <a href="#" target="_blank"> <div id="f1" style="background:url(/images/1.jpg);overflow:hidden;width:715px;position:absolute;height:310px;"></div> </a> <a href="#" target="_blank"> <div class="frame-2" id="f2"></div> </a> <a href="#" target="_blank"> <div class="frame-3" id="f3"></div> </a> <a href="#" target="_blank"> <div class="frame-4" id="f4"></div> </a> <a href="#" target="_blank"> <div class="frame-5" id="f5"></div> </a> </div> </div> <div class="controls"> <div class="arrow l-a" onmouseover="highlightA(this);" onclick="prevF();" onmouseout="dehighlightA(this);"></div> <div class="off" id="control1" onmouseover="hover(1)" onclick="press(1,false)" onmouseout="out(1)">1</div> <div class="off" id="control2" onmouseover="hover(2)" onclick="press(2,false)" onmouseout="out(2)">2</div> <div class="off" id="control3" onmouseover="hover(3)" onclick="press(3,false)" onmouseout="out(3)">3</div> <div class="off" id="control4" onmouseover="hover(4)" onclick="press(4,false)" onmouseout="out(4)">4</div> <div class="arrow r-a" onmouseover="highlightA(this);" onclick="nextF();" onmouseout="dehighlightA(this);"></div> </div> <input id="numFrame" type="hidden" value="4"></input> <a href="#" target="_blank"><input id="images1" type="hidden" value="/images/1.jpg"></input></a> <a href="#" target="_blank"><input id="images2" type="hidden" value="/images/2.jpg"></input></a> <a href="#" target="_blank"><input id="images3" type="hidden" value="/images/3.jpg"></input></a> <a href="#" target="_blank"><input id="images4" type="hidden" value="/images/4.jpg"></input></a> </div> <script src="/html/txdm_2/images/20100903/lanrenxixi.js" type="text/javascript"></script> </body> </html> <p align="center">本特效由 <a href="http://www.CsrCode.cn">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</p>
提示:您可以先修改代码后再运行,复制和保存代码功能在Firefox下无效。
(
本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
)
(本文由
CsrCode.CN
|
芯晴网页特效
收集丨
www.CsrCode.cn
)
本文网址:
上一篇:
简洁实用的banner图片幻灯展示效果
下一篇:
[酷] 非常漂亮的四屏焦点图片幻灯切换效果
评论信息
抱歉,本文暂停评论留言。
栏目分类
·
菜单导航特效
·
图层样式特效
·
链接文本特效
·
网页图片特效
·
日期时间特效
·
页面窗口特效
·
鼠标特效代码
·
网页背景特效
·
表格表单特效
·
状态栏特效
·
页面搜索特效
·
其他特效代码
热门排行
一款常用的漂亮的JS图片滑动…
jQuery 循环图片滚动切换效果…
JS实现伪3D轮播图片幻灯片切…
一款可控制切换的图片幻灯切…
JS横向带停顿的图片滚动特效…
JS图片滤镜 焦点图片自动切换…
JS模拟FLASH幻灯片图片切换效…
JS+CSS打造的非常漂亮的图片…
一款兼容所有浏览器的js图片…
JS实现的图片横向滚动展示效…
推荐信息
纯CSS打造的图片滚动下拉框效…
[酷] 漂亮的仿国外网站的图片…
简单实用的带缩略图的图片幻…
一款循环向上滚动的图片广告…
一款纯CSS实现的图片放大展示…
非常酷的弹性图片展示效果
实用的jQuery插件版感应鼠标…
一款简洁实用的图片放大镜效…
[酷] 图片的动态水波倒影效果…
一款漂亮的图片幻灯切换效果…
相关信息
CSS+jQuery版实用的图片放大…
jQuery版感应鼠标显示隐藏的…
页面上浮动飞舞的xml动画效果…
JS实现的隐藏源代码文件
JS实现网页顶部会自动收缩的…
鼠标滑过输入框自动焦点的表…
芯晴网页特效
:
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号:
浙ICP备15010075号-2
Alex排名
页面执行时间3.7188 s