基于jquery仿360网站图片选项卡切换代码

今天给大家分享一款基于jquery仿360网站图片选项卡切换代码。这款实例适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线预览   源码下载

实现的代码。

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>

via：http://www.w2bc.com/Article/24007