知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    仿淘寶上下翻滾的jquery圖片切換特效

    作者:佳明媽 來源:jquery特效 2011-05-10 人氣:
    仿淘寶網首頁上下翻滾的jquery圖片切換特效,滾動方式為上下翻滾切換的焦點幻燈片特效,jquery.Slide.js已經被壓縮不是原始的jquery文件,不過不影響使用和修改,完全可以自己重寫部分

    仿淘寶網首頁上下翻滾的jquery圖片切換特效,收集與網絡,原作者未知,滾動方式為上下翻滾切換的焦點幻燈片特效,基于jquery,jquery.Slide.js已經被壓縮不是原始的jquery文件,不過不影響使用和修改,完全可以自己重寫部分樣式,如果你重寫的樣式不生效可以在css樣式后面加 !important ,如:#btnlistID li{ color:#ffffff!important;}

    jquery代碼如下:

    <script src="http://lib.sinaapp.com/js/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.Slide.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $("#taobaoSlide").KinSlideshow({
                moveStyle:"down",
                intervalTime:8,
                mouseEvent:"mouseover",
                titleFont:{TitleFont_size:14,TitleFont_color:"#ffffff"}
        });
    })
    </script>
    <style>
    #btnlistID li{ color:#ffffff!important;}
    </style>

    這里引用了谷歌的http://lib.sinaapp.com/js/jquery/1.3/jquery.min.js,你可以換成你自己的引用路徑。

    $("#taobaoSlide").KinSlideshow 這里的# taobaoSlide 是你 jquery圖片切換特效 容器的ID。

    moveStyle:"down", 這里的 down 你可以試試 left   呵呵,聰明的你一定知道什么意思了。

    titleFont:{TitleFont_size:14,TitleFont_color:"#ffffff"}  這是字號 和字體 顏色了。

    #btnlistID li{ color:#ffffff!important;} 這個樣式是可以控制那個數字顏色的,數字的顏色默認是黑色,你想改變這個顏色你可以用這種方式,

    其他地方的樣式也可以用這種方式改變。

    jquery圖片切換特效 容器的HTML代碼如下:

    <div id="taobaoSlide" style="visibility:hidden;">
            <a href="http://www.fsussj.tw/" target="_blank"><img src="images/1.jpg" alt="懶人建站為您提供-基于jquery特效" width="500" height="200" /></a>
            <a href="http://www.fsussj.tw/JS/" target="_blank"><img src="images/2.jpg" alt="懶人建站為您分享基于jquery 特效,分享是一種精神" width="500" height="200" /></a>
            <a href="http://www.fsussj.tw/jquery/" target="_blank"><img src="images/1.jpg" alt="懶人建站為您提供-jquery 圖片特效,jquery 菜單特效" width="500" height="200" /></a>
            <a href="http://www.fsussj.tw/" target="_blank"><img src="images/2.jpg" alt="懶人建站 jquery 特效" width="500" height="200" /></a>
        </div>

    這個不多解釋,

    你還要問怎么在你的頁面中調用?這里說的基本很清楚了,還是不明白?那看演示吧,看演示里面怎么調用的。

    類似這樣的
    <a href="http://www.fsussj.tw/JS/" target="_blank"><img src="images/2.jpg" alt="懶人建站為您分享基于jquery 特效,分享是一種精神" width="500" height="200" /></a>
    一條一條的文章列表的讀取應該不是什么難事吧!

     

    ↓ 查看全文

    仿淘寶上下翻滾的jquery圖片切換特效由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    仿淘寶上下翻滾的jquery圖片切換特效-最新評論

    福利彩票排列7走势图