利用jQuery實現新浪圖片網站焦點圖輪播



30 116 39



特效描述:利用jQuery實現 新浪圖片網站 焦點圖輪播,利用jQuery實現新浪圖片網站焦點圖輪播

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="focus_body">
  <div class="bd_bg"></div>
  <div class="bd_bg2"></div>
  <div class="scroll">
      <a id="slideLeftBtn" class="arr_left" title="點擊查看上一張圖">左移動</a>
      <a id="slideRightBtn" class="arr_right" title="點擊查看下一張圖">右移動</a>
    <div class="scroll_cont" id="slideContent"> 
      <div class="box">
      <a href="http://51qianduan.com">
      	<img src="images/1.jpg" alt="">
        <div class="scroll_detail">
        <span class="bg"></span>
        <span class="sum">這是一家特殊的健身房,來這里打拳擊的都是年老的帕金森病患者。老人們希望通過拳擊運動來緩減自己的病癥。帕金森病的臨床表現主要是靜止性震顫、運動遲緩、姿勢步態障礙等,但這些老人卻能夠通過鍛煉,站在拳擊臺上用力揮出自己的拳頭。攝影|Mike Blake</span> </div>
        </a>
        <a class="btn" href="javascript:;"></a>
        <span class="title">【天下】帕金森癥的拳擊療法</span> 
      </div>
      <div class="box">
      	<a href="http://51qianduan.com">
        <img src="images/2.jpg" alt="">
        <div class="scroll_detail">
        	<span class="bg"></span>
            <span class="sum">本當被抹去淡忘的記憶,在47年后重又復活,但與往常不同的是,這一次,沉默不是被怒吼和哭泣打破的,而是歉意和愧疚發出了自己的聲音。</span>
        </div>
        </a>
        <a class="btn" href="javascript:;"></a>
        <span class="title">【歷史】文革十年 那些迷失的紅衛兵</span> 
      </div>
      <div class="box">
      <a href="http://51qianduan.com">
      	<img src="images/3.jpg" alt="">
        <div class="scroll_detail">
        	<span class="bg"></span>
            <span class="sum">Jeanloup Sieff,著名時尚攝影師。他的作品帶著一種法國式的優雅,他鏡頭下的人物似乎都被憂郁的氣質所感染。這位攝影師最廣為流傳的一句話是 “我們的情欲,就像每個人的指紋一樣,是獨一無二的。我不信仰上帝,但女人卻是他存在的證據。"</span> </div>
        </a>
        <a class="btn" href="javascript:;"></a>
        <span class="title">【情色圖志】Jeanloup Sieff:孤獨的情欲</span> 
      </div>
      <div class="box">
      <a href="http://51qianduan.com">
     	 <img src="images/4.jpg" alt="">
        <div class="scroll_detail">
        <span class="bg"></span>
        <span class="sum">由中央美術學院美術館發起、策劃的“首屆北京國際攝影雙年展:靈光與后靈光”將于2013年10月24日至12月7日在中華世紀壇等展出。圖為攝影師嚴明的參展作品《內衣女孩》。</span>
        </div>
        </a> <a class="btn" href="javascript:;"></a> <span class="title">北京國際攝影雙年展</span> 
      </div>
      <div class="box">
      	<a href="http://51qianduan.com">
        <img src="images/5.jpg" alt="">
        <div class="scroll_detail">
        <span class="bg"></span>
        <span class="sum">英國攝影師吉米-納爾遜的足跡幾乎遍布地球上的每一個偏遠而美麗的角落,用鏡頭記錄下35個原始部落的日常生活瞬間。生活在奧莫河谷的穆爾西人,是一個游牧部落。奧莫河谷座落于埃塞俄比塞西南部的非洲大裂谷,距肯尼亞邊境不遠。</span> </div>
        </a>
        <a class="btn" href="javascript:;"></a>
        <span class="title">正在消失的原始部落</span> 
      </div>
      <div class="box">
      <a href="http://51qianduan.com">
      <img src="images/6.jpg" alt="">
        <div class="scroll_detail">
        <span class="bg"></span>
        <span class="sum">Francois Brunelle開始了一項名為《i’m not alook-alike》的攝影項目。這個有趣的項目是讓兩個兩個毫無關系、卻長相相似的陌生人站在一個普通的背景下,擺出很平常的姿勢后拍攝他們的肖像,照片里的模特看起來像是雙胞胎一般。</span> </div>
        </a> <a class="btn" href="javascript:;"></a>
        <span class="title">【攝影師】長得一樣的陌生人</span> 
      </div>
    </div>
  </div>
  <div id="slideNum" class="numList"></div>
</div>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片拖動 圖片拖拽 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片放大鏡 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片廣告 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖標導航 圖標菜單 自動滾動圖片輪播 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片 圖片插件 頭像截圖 帶標題的焦點圖 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 選項卡自動切換 圖片文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子