jquery.SuperSlide仿面包网影视网站带缩略图的焦点图片切换



114 453 152



特效描述:jquery.SuperSlide 仿面包网影视网 带缩略图的 焦点图片切换,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="js/jquery1.42.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>

3. HTML代码

<div class="warpper">
    <div class="qirebox">
    	<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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" 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="http://www.dijiuzhanzhang.com/" target="_blank">立即观看</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="num">
            <ul>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/2.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/3.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/4.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/5.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/6.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/7.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/8.jpg" /></a></li>
                <li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/9.jpg" /></a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
$(".qirebox").slide({
	titCell:".num ul li",
	mainCell:".qirepic ul.info",
	effect:"fold", 
	autoPlay:true,
	delayTime:300
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片叠加 图片层叠 图片翻转 图片旋转 图片拖动 图片拖拽 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 二维码 图片放大镜 h5图片动画 h5图标动画 html5图片动画 html5图标动画 带缩略图的幻灯片 地图 中国地图 世界地图 flash焦点图 flash幻灯片 flashbanner flash图片轮播 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滚动切换 滚动条切换 图片广告 滑动选项卡 滑动切换 纯图片轮播 图片轮播 图片收缩展开 图片收缩 图片展开 图片滚动 图片滚动条 图片滑动 图片滑块 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片切换 图片选项卡 图标选项卡 图标导航 图标菜单 自动滚动图片轮播 滑动手风琴 背景切换 大图切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 渐隐切换 淡出淡进 淡出 淡进 图表 焦点图 幻灯片 轮播图 bar焦点图 图片 图片插件 头像截图 图片淡出淡进 图片淡出 图片淡进 带缩略图的幻灯片 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播 图片网格 全屏焦点图

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到