jQuery手机3D相册切换

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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

<section id="dgContainer" class="dg_container">
    <div class="dg_wrapper">
        <a href="http://www.erdangjiade.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 //定时毫秒
});