以下是 基于SuperSlide电影频道焦点图代码轮播滚动切换特效 的示例演示效果:
部分效果截图:
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="此代码内容为基于SuperSlide电影频道焦点图代码" />
<title>基于SuperSlide电影频道焦点图代码</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.css">
<script src="js/jquery1.42.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="warpper">
<div class="wwwqirecom">
<div class="qirepic">
<ul class="info">
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/11.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="警察故事2013">警察故事2013</a></h2>
<span>(抢先版)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>成龙 刘烨 景甜 黄渤 张蓝心 王志飞 郑晓宁</span></li>
<li>类型：<span>罪案 悬疑</span></li>
<li>导演：<span>丁晟</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2013-12-28 13:38:07</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>《警察故事2013》是成龙经典制作“警察故事”系列最新作品。该片除续写“经典”以外，其内容与格局都是成龙电影前所未有的新尝试，是一个全新演绎的警察故事，一部崭新视角的警匪片。夜，繁华街区一座大型酒吧内，所有客人被劫持为人质。其中包括刑警钟文和女 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/22.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="私人订制">私人订制</a></h2>
<span>(TS)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>葛优 李小璐 郑恺</span></li>
<li>类型：<span>悬疑</span></li>
<li>导演：<span>冯小刚</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2013-12-28 13:37:33</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>一个海归派与暴发户之间的矛盾冲突。主人公秦海原本是个社会底层的人，不过他通过发明专利发了一笔横财，为了改变自己的地位，他削尖了脑袋想往贵族圈子里钻。为了追求纯正贵族血统的女孩，秦海决定以每月20万的代价接受贵族训练，而训练他的则是一名满口理论 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/33.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="飞虎出征">飞虎出征</a></h2>
<span>(BD国语中字)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>余文乐 杜汶泽 邹凯光 曾国祥</span></li>
<li>类型：<span>生活</span></li>
<li>导演：<span>麦咏麟</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2014-01-06 11:06:53</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>飞虎队是香港警方针对严重罪案，专门成立的精英部队。作為世界最优秀的机动部队之一，没有任何一次恐怖活动能躲避过它的制裁。 按照惯例，飞虎队会定期派遣部分成员，参加国际军事训练演习。然而，因為一次失败落选，其所属B队组员小强、阿富、虾米、家豪却因 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/44.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="雷神2 黑暗世界">雷神2 黑暗世界</a></h2>
<span>(DVD版)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>克里斯·海姆斯沃斯 汤姆·希德勒斯顿 娜塔丽·波特曼</span></li>
<li>类型：<span>冒险 魔幻</span></li>
<li>导演：<span>丹尼尔·米汗</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2013-12-04 00:21:38</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>在新的一集中，雷神还是要面对强大的黑暗的对手的挑战，他要不断地战斗，来保护九大国度和地球的安全。可是托尔所面对的对手过于强大，奥丁和阿斯卡德都无法招架。迫于要保全家国的想法，托尔只有一个人独自踏上了最危险也是最孤独的寻求解决之道的旅程。在影 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/55.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="狄仁杰之神都龙王">狄仁杰之神都龙王</a></h2>
<span>(BD1280蓝光超清)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>刘嘉玲 赵又廷 Angelababy 冯绍峰 林更新 金范</span></li>
<li>类型：<span>历史 古装 悬疑</span></li>
<li>导演：<span>徐克</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2013-12-23 16:34:31</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>由徐克导演，华谊筹拍的新片《狄仁杰之神都龙王》（又名《狄仁杰前传》），讲述21岁的少年狄仁杰（赵又廷饰演）前往大理寺报到任职时，卷入水怪劫掳案，睿姬（Angelababy饰演）昔日情郎元祯（金范饰演）成了破案的关键；狄仁杰协同沙陀忠（林更新饰演）、尉迟 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/66.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="特殊身份">特殊身份</a></h2>
<span>(BD1280高清国语)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>甄子丹 景甜 张涵予 安志杰</span></li>
<li>类型：<span>罪案</span></li>
<li>导演：<span>霍耀良</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2013-12-24 16:55:13</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>制片方此前为这部年度动作大片准备了多个名字，但直到发布会前不久才最终确定片名为《特殊身份》，对此片方表示，是因为这个名字最符合影片的神秘气质。为了能够呈现出最佳的视听效果，《特殊身份》邀请到了曾拍摄过多部经典动作戏的香港知名导演霍耀良、奥斯 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/77.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="全民目击">全民目击</a></h2>
<span>(BD)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>郭富城 孙红雷 余男 邓家佳 赵立新</span></li>
<li>类型：<span>悬疑</span></li>
<li>导演：<span>未知</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2013-12-23 16:34:25</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>《全民目击》讲述的是富豪林泰与明星杨丹陷入情网，不料在结婚前夕，他的宝贝女儿林萌萌与杨丹发生矛盾并过失杀死了杨丹。在血浓於水的情感与严谨的法律之间，这个为了救女费尽心机的父亲与律师周莉和检察官童涛之间发生了精彩交锋…… 幕后制作 电影《全民目 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/88.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="金蝉脱壳">金蝉脱壳</a></h2>
<span>(BD1280高清)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>阿诺·施瓦辛格 西尔维斯特·史泰龙 詹姆斯·卡维泽</span></li>
<li>类型：<span>悬疑 惊悚</span></li>
<li>导演：<span>米凯尔·哈弗斯特罗姆</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2014-01-09 10:47:41</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>史泰龙饰演的雷是个监狱设计师，原计划测试世界上最坚不可摧的监狱，不料却被关入狱中企图灭口。为了复仇，雷必须想办法逃出这座全透明无隐私的高压监狱。而阿诺则饰演一位亦正亦邪的囚犯大佬，他与雷强强联手，在防止监狱暴动的情况下共同越狱。 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
<li>
<div class="qirepic-silder-panel">
<a class="qirepic-silder-img" href="#"><img src="images/99.jpg" /></a>
<div class="qirepic-silder-intro">
<div class="qirepic-silder-title">
<h2><a target="_blank" href="#" title="地球引力">地球引力</a></h2>
<span>(BD)</span>
</div>
<ul class="qirepic-silder-info clearfix">
<li class="long"><label>主演：</label><span>乔治·克鲁尼 桑德拉·布洛克</span></li>
<li>类型：<span>惊悚</span></li>
<li>导演：<span>阿方索·卡隆</span></li>
<li>年份：<span>2013</span></li>
<li>时间：<span>2014-01-07 12:53:36</span></li>
</ul>
<p class="qirepic-silder-desc">剧情：<span>《地球引力》是一部太空科幻惊悚片，由《人类之子》（Children of Men）导演阿方索·夸隆（Alfonso Cuarón）执导，影片的剧本由夸隆和他28岁的儿子乔纳斯（Jonás）共同创作。 《地球引力》将由阿方索·夸隆的老搭档、《哈利波特》程序员设计师联盟淘宝店 ...</span></p>
<a class="qirepic-silder-play" href="#" target="_blank">立即观看</a>
</div>
</div>
</li>
</ul>
</div>
<div class="num">
<ul>
<li><a href="#" target="_blank"><img src="images/1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/5.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/6.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/7.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/8.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="images/9.jpg" /></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(".wwwqirecom").slide({ titCell:".num ul li" , mainCell:".qirepic ul.info" , effect:"fold", autoPlay:true , delayTime:300 });
</script>
</body>
</html>CSS代码(lrtk.css):
/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
/* css ���� */
body,div,ul,li,h2,span,p{padding:0;margin:0;}
body{font-family:Arial,Helvetica,sans-serif;}
.clearfix:after{content:" ";clear:both;height:0;visibility:hidden;display:block;}
.clearfix{*zoom:1;}
ul{list-style:none;}
img{border:none;}
a{blr:expression(this.onFocus=this.blur());outline:none;text-decoration:none;}
/*��ʵ�� css*/
.warpper{height:350px;background:#111111;}
.wwwqirecom{width:1000px;margin:0 auto;overflow:hidden;}
.qirepic{width:772px;height:310px;color:#FFFFFF;margin-top:20px;float:left;}
.qirepic ul li img{width:200px;height:300px;border:2px #111111 solid;}
.qirepic ul li a.qirepic-silder-img{display:block;width:205px;border:3px #000000 solid;float:left;}
.qirepic-silder-intro{height:310px;width:530px;float:left;padding-left:15px;}
.qirepic-silder-title{line-height:30px;padding:10px 0 14px 0;}
.qirepic-silder-title h2 a{color:#FFFFFF;font-size:26px;font-weight:normal;font-family:"Microsoft Yahei"}
.qirepic-silder-title h2 a:hover{text-decoration:underline;}
.qirepic-silder-title span{color:#FF6600;font-size:14px;}
.qirepic-silder-info li,.qirepic-silder-desc{font-size:14px;color:#999999;}
.qirepic-silder-info li{width:250px;height:25px;overflow:hidden;float:left;}
.qirepic-silder-info li span,.qirepic-silder-desc span{color:#CCCCCC;}
.qirepic-silder-info li.long{width:500px;margin-bottom:5px;}
.qirepic-silder-desc{display:block;height:96px;line-height:24px;padding-bottom:10px;overflow:hidden;}
.qirepic-silder-play{display:block;width:136px;height:29px;background:url(../images/silder-play.png) no-repeat;text-indent:-9999px;}
.qirepic-silder-play:hover{background-position:0 -30px;}
/*ͼƬ����*/
.num{width:208px;height:268px;background:#000000;padding:10px;margin-top:32px;float:left;overflow:hidden;}
.num ul{width:220px;}
.num li{float:left;margin:0 5px 5px 0px;}
.num li a{display:block;border:2px #000 solid;padding:1px;}
.num li img{width:60px;height:80px;}
.num li.on a{border:2px #FF6600 solid;}
/*��ǰ��*/
分享到QQ
分享到微博
微信扫一扫
