当前位置:主页 > jquery插件 > 轮播图 >

jQuery 3d轮播图

栏目分类:轮播图   模板编号:JQ00091    发布日期:2018-05-22   来源:资源盒子   浏览次数:次     在线预览
做项目时写的轮播,接手别人的代码时,因问题太多,不兼容ie8,整体重写,利用jQuery的animate来实现兼容性的问题


引入css与JS

<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>

HTML代码块

<div class="pre_banner_3d">
        <div class="contrves">
            <ul class="nav_banners">
                <li class="blue_nav">券好赚</li>
                <li>京东购物</li>
                <li>淘宝购物券</li>
                <li>腾讯象棋</li>
            </ul>
        </div>
        <div class="banner_tree">
            <div class="show_phone_s">
                    <img class="img_phone" src="img/phone-box.png" alt="">
            </div>
            <div class="left_btn color_font">&lt;</div>
            <div class="right_btn color_font">&gt;</div>
            <ul class="show_s_ui">
                <li>
                    <img src="img/Screenshot_2018-05-14-16-32-47-412_com.tencent.mm.png" alt="">
                    <div>1</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-14-16-41-40-432_com.tencent.mm.png" alt="">
                    <div>2</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-16-10-17-29-190_com.tencent.mm.png" alt="">
                    <div>3</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-16-10-17-51-574_com.tencent.mm.png" alt="">
                    <div>4</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-16-10-18-05-793_com.tencent.mm.png" alt="">
                    <div>5</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-16-10-18-18-120_com.tencent.mm.png" alt="">
                    <div>6</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-16-10-18-26-108_com.tencent.mm.png" alt="">
                    <div>7</div>
                </li>
                <li>
                    <img src="img/Screenshot_2018-05-16-10-18-38-082_com.tencent.mm.png" alt="">
                    <div>8</div>
                </li>
            </ul>
        </div>
    </div>



在线演示 立即下载
打赏本站
云盘密码:7a9x

标签: 3d轮播图

相关下载
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载