图片轮播

jamm19860411

浏览: 86566 次
性别:
来自: 北京

最近访客更多访客>>

fatzhan

ynduanlian

bustersword

mft8899

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (55)

社区版块

存档分类

Flash 网游 CSS 游戏 Web

图片轮播：
<div class="big-pic" id="SwitchBigPic">
<a href="#" blockid="2131"><img></a>
<a href="#" blockid="2131"><img></a>
<a href="#" blockid="2131"><img></a>
<a href="#" blockid="2131"><img></a>
<a href="#" blockid="2131"><img></a>
<a href="#" blockid="2131"><img></a>
</div>
父级：设高、宽、overflow：hidden
子集：块级、高、宽
变换：父级的scrollTop

一下为从迅雷摘录的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Document</title>
<style type="text/css">
/**/
.flash-box { width:450px; height:251px; overflow:hidden; padding:5px 9px; margin-bottom:8px; background:url(http://misc.web.xunlei.com/www_5_1/css/../img/flashBg.png) no-repeat 0 0; }
.flash-box h2 { font-size:13px; width:448px; height:20px; line-height:20px; margin-bottom:1px; color:#193B5F; }
.flash-box .big-pic { float:left; width:366px; height:188px; overflow:hidden; margin-right:2px; }
.flash-box .big-pic img { display:block; width:364px; height:186px; border:1px solid #fff; }
.flash-box .pic-list { float:left; width:81px; height:188px; position:relative; }
.flash-box .pic-list .pre, .flash-box .pic-list .next, .flash-box .pic-list .no-pre, .flash-box .pic-list .no-next { background:url(http://misc.web.xunlei.com/www_5_1/img/sprite.png) no-repeat; width:81px; height:11px; position:absolute; top:0; left:0; }
.flash-box .pic-list .pre { background-position:-804px -108px; }
.flash-box .pic-list .no-pre { background-position:-852px -108px; }
.flash-box .pic-list .next { background-position:-804px -125px; top:177px; }
.flash-box .pic-list .no-next { background-position:-852px -125px; top:177px; }
.flash-box .pic-list ul { position:absolute; top:0; left:5px; padding:0;}
.flash-box .pic-list li { float:left; width:71px; height:40px; overflow:hidden; margin-bottom:2px; }
.flash-box .pic-list li a { display:block; width:71px; height:40px; overflow:hidden; }
.flash-box .pic-list li a img { display:block; width:71px; height:40px; padding:1px; }
.flash-box .pic-list li a:hover, .flash-box .pic-list li a.currA { border:2px solid #56AAD8; width:67px; height:36px; }
.flash-box .pic-list li a:hover img, .flash-box .pic-list li a.currA img { margin:-2px; }
.flash-box .flash-txt { clear:both; height:38px; line-height:19px; padding-top:3px; }
.flash-box .flash-txt h3 { font-size:12px; height:19px; overflow:hidden; }
.flash-box .flash-txt em { margin-left:8px; font:normal bold 14px Arial, Helvetica, sans-serif; color:#FF5B01; }
.flash-box .flash-txt p { font-size:12px; color:#939393; height:19px; overflow:hidden; }
/**/

</style>
<script type="text/javascript" src="js4round_new.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<div class="flash-box">
<h2>今日推荐</h2>
<div class="big-pic" id="SwitchBigPic">
<a href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/d594540ef8c9899804e909ce47860065.jpg" alt="" /></a>
<a href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/07373cc25309850d32728dcb6a536e3f.jpg" alt="" /></a>
<a href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/681cad85b4ad73cf215eafe721a93ecd.jpg" alt="" /></a>
<a href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/552/0da4b7ad81a86682549dda4786bc2a92.jpg" alt="" /></a>
<a href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/15fb84e7634425c050fbb9096520c869.jpg" alt="" /></a>
<a href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/6a39c0e8779aaed7476b0b7e885f778c.jpg" alt="" /></a>
</div>

<div class="pic-list">
<a id="a_pre" href="javascript:void(0)" onclick="SmallNews.pre()" class="no-pre" target="_self" title="向上翻" blockid="2131"></a>
<a id="a_next" href="javascript:void(0)" onclick="SmallNews.next()" class="next" target="_self" title="向下翻" blockid="2131"></a>
<div style="position:relative;top:10px;overflow: hidden; height: 168px;">
<ul id="ul_recom">
<li><a id="SwitchSmaPic_0" href="#" class="currA" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/1bea477d1e3d2ff44d01121a989c02c5.jpg" alt="" /></a></li>
<li><a id="SwitchSmaPic_1" href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/8dc8f0a4857b66af1f10cf01cbf9e713.jpg" alt="" /></a></li>
<li><a id="SwitchSmaPic_2" href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/f993f1f47dfa8f2b2f553fd5d43a184e.jpg" alt="" /></a></li>
<li><a id="SwitchSmaPic_3" href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/552/1c04c37aa9e0b1d10452b7ce82ce5f04.jpg" alt="" /></a></li>
<li><a id="SwitchSmaPic_4" href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/77e7ec3a6fc65aa327948c56c0b97189.jpg" alt="" /></a></li>
<li><a id="SwitchSmaPic_5" href="#" blockid="2131"><img src="http://images.movie.xunlei.com/gallery/553/83f09bddfaf27a13fb429db6b9d5e914.jpg" alt="" /></a></li>
</ul>
</div>
</div>

<div class="flash-txt" id="SwitchPicTxt_0">
<h3><a href="#" title="" blockid="2131">【新片首播】《暴力街区13：终极》倍受期待法国动作大片最新续作</a></h3>
<p>“跑酷”运动创始者大卫·贝尔与动作巨星塞瑞尔·拉菲利继续联手出演该片新作</p>
</div>

<div class="flash-txt" id="SwitchPicTxt_1">
<h3><a href="#" title="" blockid="2131">【荧屏热播】《浣花洗剑录》古龙经典武侠改编剧掀动荧屏呈现全新武侠</a></h3>
<p>超强明星阵容备乔振宇领衔古龙经典谢霆锋与阿娇的恩怨情仇谭耀文诠释古装神韵</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_2">
<h3><a href="#" title="" blockid="2131">【新片首播】《冰河世纪3》09最新好莱坞3D动画电影高清点播</a></h3>
<p>精彩眩目的3D观影效果，让您伴随史前动物们进入神秘的恐龙时代</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_3">

<h3><a href="#" title="" blockid="2131">【推广】凡客诚品打造极限购物体验，全场免运费</a></h3>
<p>全棉缤纷今夏，双珠地双扣POLO衫单件68元，任选四件仅售199元</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_4">
<h3><a href="#" title="" blockid="2131">【游戏】下载《迅雷问鼎》客户端，赢PSP3000，哄抢香港豪华游资格！</a></h3>
<p>大胆出位玩网游！今年夏天玩什么？玩真人“宝宝” 5P连环出战！</p>
</div>
<div class="flash-txt" id="SwitchPicTxt_5">
<h3><a href="#" title="" blockid="2131">【荧屏热播】《一枝梅》韩国帅哥李准基演绎一代侠盗的快意人生</a></h3>

<p>韩国高收视热播剧，爱情风景绚烂、梅花装点浪漫爱情，带你领略古代韩国风情</p>
</div>

</div>

<script>
var Today_recom={
step:42,
totalcount:6,
a_pre:"a_pre",
a_next:"a_next",
ul:'ul_recom'
};
SmallNews.init(Today_recom);
var IndexRecom={
bigpic:"SwitchBigPic", //大图DIV之ID通用部分
step:188,
smallpic:"SwitchSmaPic",//小图之ID通用部分
selectstyle:"currA", //小图被选中之后的CSS
pictxt:"SwitchPicTxt", //配套图片文字
totalcount:6, //图片数量
autotimeintval:5000,
objname:"IndexRecom" //对象名称
} ;
BigNews.init(IndexRecom);
</script>
<script>
var CachePic = new Array() ;
CachePic['recommend'] = new Array() ;
</script>
</body>
</html>

分享到：