jquery.SuperSlide仿面包網影視網站帶縮略圖的焦點圖片切換



119 473 158



特效描述: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

加群請備注:從官網了解到

老夫子电子