您的位置：首页 > Web前端 > JavaScript

js 仿淘宝首页最新图片幻灯切换效果

2012-05-07 22:08 751 查看

http://www.111cn.net/js_a/75/d05a5ed20e16085c19d50bfc9fd9652f.htm

js 仿淘宝首页最新图片幻灯切换效果

<!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>js 仿淘宝首页最新图片幻灯切换效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">



<style type="text/css">

body{font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

img{border:none;}

a,a:link,a:visited{color:#333333;text-decoration:none;cursor:pointer;}

a:hover{color:#008b00;text-decoration:underline;}

.hd h3{font-size:14px;color:#444444;padding-left:10px;color:#fff;line-height:30px;}

.loading{background:#f9fdff url('http://www.zzsky.cn/effect/images/201004241815/T16WJqXaXeXXXXXXXX-32-32.gif') no-repeat 50% 50%;}

.j_Slide{margin:30px 50px;border:5px #c2dae5 solid;width:470px;height:150px;overflow:hidden;position:relative;-webkit-border-radius:4px;}

.j_Slide .tb-slide-list{position:absolute;width:99999px;}

.j_Slide .tb-slide-list li{height:150px;}

.j_Slide .tb-slide-list li img{width:470px;height:150px;}

.lbtn{position:absolute;z-index:3;bottom:3px;right:5px;}

.lbtn li{float:left;line-height:21px;width:24px;padding:0 2px;}

.lbtn li a,.lbtn li a:link,.lbtn li a:active,.lbtn li a:visited{display:block;text-align:center;background:url('http://www.zzsky.cn/effect/images/201004241815/lbtnA_bg.gif') no-repeat left 50%;line-height:21px;font-family:"Arial
Unicode MS";}

.lbtn li.hover a,.lbtn li.hover a:link,.lbtn li.hover a:active,.lbtn li.hover a:visited
{color:#fff;font-weight:bold;font-family:Verdana;text-decoration:none;background:url('http://www.zzsky.cn/effect/images/201004241815/lbtnA_bg_hover.gif') no-repeat left top;}

.j_Slide1{width:432px;height:152px;overflow:hidden;margin:30px 50px;}

.j_Slide1 .tb-slide-list{position:absolute;width:99999px;}

.j_Slide1 .bd{overflow:hidden;}

.j_Slide1 .tb-slide-list li img{width:200px;height:100px;padding:8px;overflow:hidden;}

.j_Slide1 .hd{height:30px;position:relative;background:#666;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;}

.j_Slide1 .bd{position:relative;border:1px #000 solid;height:116px;}

.j_Slide1 .hd .handel{position:absolute;right:5px;top:6px;}

.j_Slide1 .hd .handel li{float:left;}

.j_Slide1 .hd .handel li a,.j_Slide1 .hd .handel li a:link,.j_Slide1 .hd .handel li a:active,.j_Slide1 .hd .handel li a:visited{text-decoration:none;padding:2px 4px;}

.j_Slide1 .hd .handel li.hover a,.j_Slide1 .hd .handel li.hover a:link,.j_Slide1 .hd .handel li.hover a:active,.j_Slide1 .hd .handel li.hover a:visited{color:#fff;}

.direct-left{width:99999px;}

.direct-left li{float:left;}

.direct-right{}

.direct-right li{float:right;}

</style>

<script src="http://www.zzsky.cn/effect/images/201004241815/jquery.min.js" language="javascript" type="text/javascript"></script>

<script src="http://www.zzsky.cn/effect/images/201004241815/oslide.js" language="javascript" type="text/javascript"></script>

<script src="http://www.zzsky.cn/effect/images/201004241815/easing.js" language="javascript" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(function() {

var $o = $(".j_Slide");

var ks = $o.find("ol").Oslide({

slidetag:$o.find("ol>li"),

easing:"easeInOutCirc",

speed:450

});

var $p = $(".j_Slide1");

var ks = $p.find("ol").Oslide({

slidetag:$p.find("ol>li"),

btntag:$p.find(".handel"),

direct:'right',

easing:"easeInOutCirc"

});

});

</script>

</head>

<body>



<div class="j j_Slide loading">

<ol class="tb-slide-list">

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="http://www.zzsky.cn/effect/images/201004241815/ad_5.jpg"></a></li>

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124407122.jpg"></a></li>

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124513801.jpg"></a></li>

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124531303.jpg"></a></li>

</ol>

</div>

<div class="j j_Slide1">

<div class="hd">

<h3>最新商家</h3>

<ul class="handel clearfix">

<li><a href="javascript:void(0)">●</a></li>

<li><a href="javascript:void(0)">●</a></li>

<li><a href="javascript:void(0)">●</a></li>

</ul>

</div>

<div class="bd">

<ol class="tb-slide-list clearfix">

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124538178.jpg"></a><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124544264.jpg"></a></li>

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124550695.jpg"></a><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124556750.jpg"></a></li>

<li class="J_ECPM"><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124550695.jpg"></a><a href="#" target="_blank"><img alt="js 仿淘宝首页最新图片幻灯切换效果" src="/get_pic/2010/03/20100426124556750.jpg"></a></li>

</ol>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航