基於jquery仿360網站圖片選項卡切換代碼

時間 2019-11-19
原文原文鏈接
今天給你們分享一款基於jquery仿360網站圖片選項卡切換代碼。這款實例適用瀏覽器：IE八、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗。效果圖以下：html
實現的代碼。瀏覽器
html代碼：安全
    <div class="slides">
        <div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSelector : '.slide',autoPlay: true, supportMouseenter: false,mouseenterSwitchTime: 10,animType:'scroll',autoPlayTime:6000">
            <div class="slide-content" style="overflow: hidden; width: 960px; position: relative;"
                id="picslide1_scroll_div">
                <div style="width: 10000px; position: relative;" class="clearfix">
                    <!--安全衛士-->
                    <div class="slide slide-1" id="tabs_1_cont_1">
                        <h1>
                            360安全衛士</h1>
                        <h2>
                            界面全新升級，聚焦核心功能，繼續引領安全軟件行業</h2>
                        <a href="#" class="btn btn-8  _download_url_for_bd"></a><a href="#" class="btn btn-cq">
                        </a>
                        <p class="info">
                            v10.0正式版（02月06日更新）</p>
                        <a href="#" class="icon  _download_url_for_bd"></a><a href="#" class="tit"></a>
                        <p class="link">
                            <a href="#">[領航版Beta]</a> <a href="#">[離線安裝包]</a> <a href="#">[網管版]</a>&nbsp; &nbsp;<a
                                href="#">[MAC版]</a></p>
                    </div>
                    <!--360殺毒-->
                    <div class="slide slide-2" id="tabs_1_cont_2">
                        <h1>
                            360殺毒</h1>
                        <h2>
                            全球首款永久免費的殺毒軟件，全面防護、強勁查殺</h2>
                        <a href="#" id="360sd_down" class="btn btn-3"></a>
                        <p class="info">
                            版本：v5.0正式版&nbsp;&nbsp; 大小：<span id="360sd_size">32.6MB</span><br>
                            更新：2014-12-02&nbsp;&nbsp; 系統：XP/Vista/Win7/Win8/Win8.1</p>
                        <p class="link">
                            <a href="#" id="360sd_win81">[搶鮮版下載]</a> <a href="#">[360網管版]&nbsp;全網殺病毒修漏洞 統一管理企業安全</a></p>
                    </div>
                    <!--360手機衛士-->
                    <div class="slide slide-3" id="tabs_1_cont_3">
                        <h1>
                            360手機衛士</h1>
                        <h2>
                            AV-TEST全球評測 榮獲六次滿分 蟬聯全球第一</h2>
                        <a href="#" class="btn btn-3"></a><a href="#" class="btn btn-10"></a>
                        <p class="info">
                            版本：v5.4.5正式版&nbsp;&nbsp; 大小：16.1 MB&nbsp;&nbsp; 更新：2015-02-02&nbsp;&nbsp; 系統：安卓/蘋果/Windows</p>
                        <a href="#" class="icon"></a><a href="#" class="tit"></a>
                        <p class="link">
                            <a href="#">[360清理大師]&nbsp;清垃圾、提速度，最強力的清理神器！</a>&nbsp; &nbsp;<a href="#">[360雲服務]</a></p>
                    </div>
                    <!--360安全瀏覽器-->
                    <div class="slide slide-4" id="tabs_1_cont_4">
                        <h1>
                            <a href="http://www.w2bc.com/">360安全瀏覽器</a></h1>
                        <h2>
                            網購首選，3億用戶的共同選擇</h2>
                        <a id="360se_download_1" href="#" class="btn btn-3"></a><a href="#" class="btn btn-4">
                        </a><a href="#" class="btn btn-5"></a>
                        <p class="info">
                            版本：v7.1正式版&nbsp;&nbsp; 大小：41.14MB&nbsp;&nbsp; 更新：2014-08-21&nbsp;&nbsp; 系統：XP/Vista/Win7/Win8/Win8.1</p>
                        <a href="#" class="icon"></a><a href="#" class="tit"></a>
                    </div>
                    <!--360手機助手-->
                    <div class="slide slide-5" id="tabs_1_cont_5">
                        <h1>
                            <a href="#">360手機助手</a></h1>
                        <h2>
                            最安全的安卓手機應用平臺，手機遊戲惡意扣費「先行賠付」</h2>
                        <a href="#" class="btn btn-14"></a>
                        <p class="info">
                            版本：V3.1.83正式版&nbsp;&nbsp; 大小：7.46MB&nbsp;&nbsp; 更新：2014-12-10</p>
                        <p class="link1">
                            <a href="#">[Beta版下載]</a>&nbsp;&nbsp; <a href="#">[PC版下載]</a></p>
                        <a href="#" class="icon"></a><a href="#" class="tit"></a>
                        <p class="link2">
                            <a href="# ">[360移動開放平臺] 發佈應用 免費推廣 共享手機助手4億海量用戶</a>&nbsp;&nbsp;<a href="#">[360手機遊戲]</a></p>
                    </div>
                    <!--360企業安全-->
                    <div class="slide slide-6" id="tabs_1_cont_6">
                        <h1>
                            <a href="#">360企業安全</a></h1>
                        <h2>
                            雲+端+邊界，聯合防護，共築企業安全堡壘</h2>
                        <a href="#" class="btn btn-13"></a><a href="#" class="btn btn-11"></a>
                        <p class="link">
                            <a href="http://www.w2bc.com/">[網站衛士] 防黑 防CC 防DDOS</a>&nbsp; &nbsp;<a href="#">[網站安全檢測]
                                網站安全免費體檢</a></p>
                        <a href="#" class="icon"></a><a href="#" class="tit"></a>
                    </div>
                </div>
            </div>
            <ul class="tab slide-nav">
                <li class="selected"><a href="#weishi" class="item-1">360安全衛士</a></li>
                <li><a href="#shadu" class="item-2">360殺毒</a></li>
                <li><a href="#shouji" class="item-3">360手機衛士</a></li>
                <li><a href="#360se" class="item-4">360瀏覽器</a></li>
                <li><a href="#zhushou" class="item-5">360手機助手</a></li>
                <li><a href="#qiye" class="item-6">360企業安全</a></li>
            </ul>
        </div>
        <p class="mask">
        </p>
    </div>