地图		广告招租 ←—
订阅
投稿

您的位置：网站首页 > 特效代码 > 网页图片特效 > 正文：[荐] 仿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">

<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>

<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插件版感应鼠标…
一款简洁实用的图片放大镜效…
[酷] 图片的动态水波倒影效果…
一款漂亮的图片幻灯切换效果…