jQuery手机3D相册切换

分享一款手机上常用的3D相册轮播，该相册插件gallery适用于手机端产品、团购产品、电影票等展示。提示：相册列表的两侧有隐藏的控制按钮。

分类：图片代码 > 图片插件难易：中级

查看演示下载资源下载积分： 20 积分

#dgContainer放置图片、隐藏的左右按钮和相关信息介绍列表

<section id="dgContainer" class="dg_container">
    <div class="dg_wrapper">
        <a href="http://www.sucaihuo.com/js">
            <img src="images/1.jpg" alt="image01">
            <!--<div></div>-->
        </a>
        <a href="#">
            <img src="images/2.jpg" alt="image02">
            <!--<div> </div>-->
        </a>             
    </div>
    <nav>
        <span class="dg_prev"> </span>
        <span class="dg_next"> </span>                
    </nav>
    <div class="float_layer">
        <div class="dg_float">
            <div class="dg_float_con">
                <p>凤凰古城</p>
                <p class="hot_price"><span>¥</span>5999</p>
            </div>
            <strong></strong>                    
        </div>
        <div class="dg_float">
            <div class="dg_float_con">
                <p>江南小镇</p>

                <p class="hot_price"><span>¥</span>6999</p>
            </div>
            <strong></strong>                    
        </div>
    </div>
</section>

引入gallery相册插件和手机插件jQueryMobile

<link href="style/basic.css" rel="stylesheet" type="text/css"/>
<link href="style/hot.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.gallery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>

gallery相册插件调用

$('#dgContainer').gallery({
     autoplay: true,//自动播放
     interval: 3000 //定时毫秒
});